echarts实用功能总结

1.拉伸时让图表响应

// Echarts Responsive
window.addEventListener('resize', () => {
    pieChart.resize();
    lineChart.resize();
});

2.loading动画

用于在图表数据获取到之前加入一个动画缓冲的效果。

//显示loading动画
myChart.showLoading();

//隐藏loading
myChart.hideLoading();

3.设置颜色渐变

    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

        offset: 0,
        color: 'rgba(80,141,255,0.39)'
    }, {
        offset: .34,
        color: 'rgba(56,155,255,0.25)'
    },{
        offset: 1,
        color: 'rgba(38,197,254,0.00)'
    }])

4.清空图表

lineChart.clear()

5.内置模板字符串

tooltip: {
    trigger: 'axis',
    formatter: "{a}-{b}-{c}"
}

在折线图中，以上代码中的{a}、{b}、{c}分别指代数据名称（series配置项的name属性）、横坐标的值以及纵坐标的值。

tooltip: {
    trigger: "item",
    formatter: "{a}-{c}-{d}-{b}"
}

在扇形图中，以上的{a}、{b}、{c}、{d}分别指代数据名称（series配置项的name属性）、选中项名称、选中项数值以及该项所占百分比（比如占总数据的一半{d}值为50）。

END