首页 > 建站教程 > JS、jQ、TS >  ECharts中的事件和行为正文

ECharts中的事件和行为

    在ECharts的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。
    在ECharts 3 中绑定事件跟2 一样都是通过on方法，但是事件名称比2 更加简单了。
    ECharts 3 中，事件名称对应DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。

ECharts中的事件和行为
ECharts中的事件和行为 

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

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

    鼠标事件的处理

    ECharts支持常规的鼠标事件类型，包括'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。 
// 基于准备好的dom，初始化ECharts实例
var myChart=echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option ={
    xAxis:{
        data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis:{},
    series:[{
        name:'销量',
        type:'bar',
        data:[5,20,36,10,10,20]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click',function(params){
    window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name));
});

    所有的鼠标事件包含参数params，这是一个包含点击图形的数据信息的对象，如下格式： 
{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当componentType为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的option.series中的 index。当componentType为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当componentType为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data:Object,
    // sankey、graph 等图表同时含有nodeData和edgeData两种 data，
    // dataType的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType无意义。
    dataType: string,
    // 传入的数据值
    value:number|Array
    // 数据图形的颜色。当componentType为 'series' 时有意义。
    color: string
}

    如何区分鼠标点击到了哪里： 
myChart.on('click',function(params){
    if(params.componentType==='markPoint'){
            // 点击到了markPoint上
        if(params.seriesIndex===5){
            // 点击到了index 为 5 的 series 的markPoint上。
        }
    }elseif(params.componentType==='series'){
        if(params.seriesType==='graph'){
            if(params.dataType==='edge'){
                // 点击到了 graph 的 edge（边）上。
            }else{
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码： 
myChart.on('click',function(parmas){
    $.get('detail?q='+ params.name,function(detail){
        myChart.setOption({
            series:[{
                name:'pie',
                // 通过饼图表现单个柱子中的数据分布
                data:[detail.data]
            }]
        });
    });
});

TAGS: ECharts事件