ECharts中的事件和行为

最新推荐文章于 2024-08-06 19:39:35 发布

一只爱好编程的程序猿

最新推荐文章于 2024-08-06 19:39:35 发布

阅读量1.8k

点赞数 1

分类专栏： ECharts 文章标签：数据可视化

本文链接：https://blog.csdn.net/qq_37881565/article/details/107997279

版权

ECharts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在ECharts 3中绑定事件跟2一样都是通过on方法，但是事件名称比2更加简单了。ECharts3中，事件名称对于DOM事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。

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

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

鼠标事件的处理

ECharts支持常规的鼠标事件类型，包括‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseout’、‘globalout’、‘contextmenu’事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/echarts.min.js"></script>
</head>
<body>
    <!--为echarts准备一个具备宽高的DOM-->
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        //基于准备好的dom，初始化echarts实例
        var myCharts1 = echarts.init(document.getElementById('main'));

        //指定图表配置项和数据
        var option = {
            title:{
                text:'Echarts入门实例'
            },
            tooltip:{

            },
            legend:{
                data:['销量']
            },
            xAxis:{
                data:["衬衫","羊毛衫","雪纺衫","高跟靴","臭袜子",'lan']
            },
            yAxis:{},
            series:[{
                name:'销量',
                type:'bar',
                data:[5,20,36,10,10,20]
            }]
        };
        //使用指定的配置项和数据显示图表
        myCharts1.setOption(option);
        //处理点击事件并且跳转到相应的百度搜索页面
        myCharts1.on('click',function (param) {
            window.open('https://www.baidu.com/s?wd='+encodeURIComponent(param.name))
        })
    </script>
</body>
</html>

所有的鼠标事件包含参数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 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

使用query只对指定的组件的图形元素的触发回调:

chart.on(eventName, query, handler);

query可为string或者Object。

如果为string表示组件类型。格式可以是'mainType'或者'mainType.subType'。例如:

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});

如果为Object，可以包含以下一个或多个属性，每个属性都是可选的:

{
    <mainType>Index: number // 组件 index
    <mainType>Name: string // 组件 name
    <mainType>Id: string // 组件 id
    dataIndex: number // 数据项 index
    name: string // 数据项 name
    dataType: string // 数据项 type，如关系图中的 'node', 'edge'
    element: string // 自定义系列中的 el 的 name
}

例如:

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
});

例如:

chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。
});

例如:

chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 关系图的节点被点击时此方法被回调。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 关系图的边被点击时此方法被回调。
});

例如:

chart.setOption({
    // ...
    series: {
        // ...
        type: 'custom',
        renderItem: function (params, api) {
            return {
                type: 'group',
                children: [{
                    type: 'circle',
                    name: 'my_el',
                    // ...
                }, {
                    // ...
                }]
            }
        },
        data: [[12, 33]]
    }
})
chart.on('mouseup', {element: 'my_el'}, function () {
    // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。
});

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

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通过饼图表现单个柱子中的数据分布
                data: [detail.data]
            }]
        });
    });
});

组件交互的行为事件

在ECharts中基本上所有的组件交互行为都会触发相应的事件。

下面是监听一个图例开关的实例:

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