《前端》echart-API之的事件和行为---2020年7月16日_this.mychart.on有哪些事件-CSDN博客

事件有两种类型，一种是 用户鼠标操作事件 ，通过 on 方法，如跳转地址，弹出对话框或者数据下钻等。
另一种是 组件交互的行为事件，即 调用 dispatchAction 后触发的事件，如在切换图例时出发的‘legendeselectchanged’ 事件，数据区域缩放时触发‘datazoom’事件。

1、鼠标操作事件：

click 、dbclick 、mousedown 、mousemove 、mouseover 、mouseup 、mouseout。
示例：

    mychart.on('click',function(params){
        window.open('url'+encodeURIComponent(params.name));
    })

下面是监听一个图例开关的示例：

// 图例开关的行为只会触发 legendselectchanged 事件
        myChart.on('legendselectchanged', function (params) {
            // 获取点击图例的选中状态
            var isSelected = params.selected[params.name];
            // 在控制台中打印
            console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
            // 打印所有图例的状态
            console.log(params.selected);
        });

你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等。

2、组件交互的行为事件:

myChart.dispatchAction({ type: '' "}) 触发图表行为。

    myChart.dispatchAction({
        type: 'dataZoom',
        start: 20,
        end: 30
    });
    // 可以通过 batch 参数批量分发多个 action
    myChart.dispatchAction({
        type: 'dataZoom',
        batch: [{
            // 第一个 dataZoom 组件
            start: 20,
            end: 30
        }, {
            // 第二个 dataZoom 组件
            dataZoomIndex: 1,
            start: 10,
            end: 20
        }]
    })

如：加入下拉框：当下拉框改变的时候触发legend的事件

<select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
<option value="0">2017年</option>
<option value="5">2016年</option>
</select>

/* legend 下拉列表多选*/
$('#sel_search_orderstatus').multiselect({
onChange: function (option, checked, select) {
var name = $(option).text();
console.log("option",option);
console.log("checked",checked);
console.log("select",select);

myChart.dispatchAction({
type: 'legendToggleSelect',
name: name
});
}
});