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