使用Echarts过程中问题小结

Echarts简单易上手，官网简洁明了，但使用过程中遇到几个特殊需求，解决时耗时较长，特此记录。

1. echarts点击作用域问题

ECharts 支持常规的鼠标事件类型，包括
‘click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’ 事件。

Click示例：
// 处理点击事件并且跳转到相应的百度搜索页面

myChart.on('click', function (params) {    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));});

params，这是一个包含点击图形的数据信息的对象
具体参阅官网

点击柱状图非数据区域：
(参考官网柱状图第三个示例：)

series: [        { // For shadow            type: 'bar',            itemStyle: {                normal: {color: 'rgba(0,0,0,0.05)'}            },            barGap:'-100%',            barCategoryGap:'40%',            data: dataShadow,            animation: false        },        {            type: 'bar',            itemStyle: {                normal: {                    color: new echarts.graphic.LinearGradient(                        0, 0, 0, 1,                        [                            {offset: 0, color: '#83bff6'},                            {offset: 0.5, color: '#188df0'},                            {offset: 1, color: '#188df0'}                        ]                    )                },                emphasis: {                    color: new echarts.graphic.LinearGradient(                        0, 0, 0, 1,                        [                            {offset: 0, color: '#2378f7'},                            {offset: 0.7, color: '#2378f7'},                            {offset: 1, color: '#83bff6'}                        ]                    )                }            },            data: data        }

解决思路：添加透明层，覆盖想要点击区域，可响应点击事件。

2、滚动图例

官网案例：

 legend: {        type: 'scroll',        orient: 'vertical',        right: 10,        top: 20,        bottom: 20,        data: data.legendData},

只要添加 type: ‘scroll’,即可
注意事项：V3.7.0之后才有此功能，因为版本不对，浪费了许多时间调试

3、showLoading

在echarts上显示和隐藏loading效果

myChart.showLoading({        text: '数据获取中',        effect: 'whirling'    });myChart.hideLoading();