Apache ECharts 的鼠标点击事件

事件与行为

在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。

myChart.on('click', function(params) {
  // 控制台打印数据的名称
  console.log(params.name);
});

在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged'事件（这里需要注意切换图例开关是不会触发 'legendselected' 事件的），数据区域缩放时触发的 事件等等。

<script>
        var main = document.getElementById("main");
        var myECharts = echarts.init(main, null, {
            width: 'auto',
            height: 600
        })

        var option = {
            // 基于准备好的dom，初始化ECharts实例
            // var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            legend: {
                show: true
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }, {
                name: '价格',
                type: 'bar',
                data: [25, 28, 29, 35, 38, 60]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myECharts.setOption(option);
        // 处理点击事件并且跳转到相应的百度搜索页面
        myECharts.on('click', function(params) {
             window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        });
</script>

效果：