在 ECharts 中,你可以通过事件和行为来实现与图表的交互。以下是一些常见的事件和行为:

1. 事件

a. 点击事件(click)
myChart.on('click', function(params) {
    // 处理点击事件,params 包含了点击位置的信息
    console.log(params);
});

b. 鼠标悬停事件(mousemove)
myChart.on('mousemove', function(params) {
    // 处理鼠标悬停事件,params 包含了鼠标位置的信息
    console.log(params);
});

c. 数据区域缩放事件(datazoom)
myChart.on('datazoom', function(params) {
    // 处理数据区域缩放事件,params 包含了缩放的范围等信息
    console.log(params);
});

d. 其他事件

除了上述事件外,ECharts 还提供了其他丰富的事件,如legendselectchanged、timelinechanged等。你可以根据实际需求选择监听相应的事件。

2. 行为

ECharts 中的行为(Action)可以通过工具箱(Toolbox)配置,用于提供一些交互性的操作,比如放大缩小、数据视图、保存图片等。
option = {
    toolbox: {
        feature: {
            dataZoom: { // 数据区域缩放
                yAxisIndex: 'none'
            },
            dataView: { // 数据视图
                readOnly: false
            },
            saveAsImage: {} // 保存为图片
            // ...其他工具
        }
    },
    // ...
};

上述代码中,通过 toolbox.feature 配置可以启用一些工具,用户可以通过工具箱进行相应的交互操作。

3. 自定义事件

你还可以通过 dispatchAction 方法手动触发自定义的行为,例如:
myChart.dispatchAction({
    type: 'highlight', // 自定义行为类型
    seriesIndex: 0,     // 操作的系列索引
    dataIndex: 1        // 操作的数据索引
});

这里的 highlight 是一种自定义的行为类型,可以根据实际需求进行定义。

通过事件和行为,你可以实现更灵活的图表交互和用户操作。详细的事件和行为配置可以在 ECharts 的[官方文档](https://echarts.apache.org/zh/index.html)中找到。


转载请注明出处:http://www.zyzy.cn/article/detail/5066/ECharts