echarts 事件与行为交互,来这找就对了
1 前置知识
- 用户直接与图表内容的交互(鼠标)
- 用户直接与图表组件的的交互(鼠标)
- 代码层面控制与图表的交互,外部区域的事件统一触发图表区域的事件或者自动执行图表行为
- 区分事件与行为,所有事件名称均小写
- 绑定事件通过实例的 on 和 off 方法,代码触发用 dispatchAction
- 需要更进阶的交互需要访问底层 zrender 图形元素,通过 getZr 方法
2 echarts 事件与行为
3 echarts 实例绑定事件 on
4 echarts 实例解绑事件 off
5 echarts 代码触发 dispatchAction
echarts 文档 📚 dispatchAction 触发
6 echarts 事件名称 events
7 echarts 进阶 zrender 事件
我们需要先明确两种事件。zrender 事件和 echarts 事件。上面讨论的都是 echarts 事件。
- echarts 事件 当鼠标在图形元素上时才能被触发
- zrender 事件 当鼠标在任何地方都会被触发
zrender 事件需要用到判断是否在图形上三个 api
- convertFromPixel 转换像素坐标值到逻辑坐标系上的点。 echarts 文档 📚 convertFromPixel
- convertToPixel 转换坐标系上的点到像素坐标值。 echarts 文档 📚 convertToPixel
- containPixel 判断给定的点是否在指定的坐标系或者系列上。 echarts 文档 📚 containPixel
事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。
空白处点击事件
// 该监听器正在监听一个`zrender 事件`。
myChart.getZr().on("click", function (event) {
// 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。
if (!event.target) {
// 点击在了空白处,做些什么。
}
});
响应图形任意位置的点击事件
myChart.getZr().on("click", params => {
// 使用getZr添加图表的整个canvas区域的点击事件,并获取params携带的信息
const pointInPixel = [params.offsetX, params.offsetY];
// 获取到鼠标点击位置
if (myCharts.containPixel("grid", pointInPixel)) {
// 使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。
let xIndex = myCharts.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
}
});
响应图形任意位置而非节点的移入事件,比如监听移入折线图的线而非折线图的点
myChart.getZr().on("mousemove", function (params) {
// 获取点击的像素点坐标
const point = [params.offsetX, params.offsetY];
myChart.getOption().series.forEach(function (series) {
// 获取图形元素的 group
const group = myChart.getModel().getSeriesByName(series.name).group;
// containPixel 是一个用于判断指定像素点是否在特定图形元素范围内的方法。
if (group && group.containPoint(point[0], point[1])) {
console.log("点击的像素点在图形元素范围内");
console.log("所在系列名称:", series.name);
}
});
});
进阶用法有更好的创意欢迎评论区交流
洗尽铅华始见金,褪去浮华归本真
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡