ECharts通过监听用户的操作行为来回调对应的函数

ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。

ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。

ECharts 中事件分为两种类型:

用户鼠标操作点击，如 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged' 事件），数据区域缩放时触发的 'datazoom' 事件等等。

myChart.on('click', function (params) {
    // 在用户点击后控制台打印数据的名称
    console.log(params);
});

myChart.on('legendselectchanged', function (params) {
    console.log(params);
});

myChart.on('click', 'series.line', function (params) {
    console.log(params);
});

myChart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
    console.log(params);
});

实例之鼠标事件：

以下实例在点击柱形图时会弹出对话框：

// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        data: ["电脑","手表","手机","ipad","录像机"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [143, 433, 655, 666, 1020]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且弹出数据名称
myChart.on('click', function (params) {
    alert(params.name);
});