使用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();