echarts 事件与行为交互,来这找就对了

1 前置知识

  1. 用户直接与图表内容的交互(鼠标)
  2. 用户直接与图表组件的的交互(鼠标)
  3. 代码层面控制与图表的交互,外部区域的事件统一触发图表区域的事件或者自动执行图表行为
  4. 区分事件与行为,所有事件名称均小写
  5. 绑定事件通过实例的 on 和 off 方法,代码触发用 dispatchAction
  6. 需要更进阶的交互需要访问底层 zrender 图形元素,通过 getZr 方法

2 echarts 事件与行为

echarts 文档 📚 事件与行为


3 echarts 实例绑定事件 on

echarts 文档 📚 on 绑定


4 echarts 实例解绑事件 off

echarts 文档 📚 off 解绑


5 echarts 代码触发 dispatchAction

echarts 文档 📚 dispatchAction 触发


6 echarts 事件名称 events

echarts 文档 📚 events 事件名称


7 echarts 进阶 zrender 事件

我们需要先明确两种事件。zrender 事件和 echarts 事件。上面讨论的都是 echarts 事件。

  • echarts 事件 当鼠标在图形元素上时才能被触发
  • zrender 事件 当鼠标在任何地方都会被触发

zrender 事件需要用到判断是否在图形上三个 api

事实上,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);
    }
  });
});

进阶用法有更好的创意欢迎评论区交流

posted @   wanglei1900  阅读(119)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡
点击右上角即可分享
微信分享提示