Echarts获取整个图表点击DOM和单条数据DOM方法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用场景

在做数据展示时，业务场景是点某一条数据展示更详细的信息（具体到某一天某一地区数据）。
所以我总结了两种获取DOM的方法可以自行测试使用（可能还有其他方法可以写在评论区😁）。

二、使用步骤

1.通过refs获取图表实例

代码如下（示例）：

// 获取图表实例
let myChart = this.$refs.charts.chart;

2.点击整个图表

//  针对整个图表的点击
myChart.getZr().on("click", "series.line", (params) => {
    console.log("点击了", params);
    // 可以在此处做一些逻辑操作。比如切换图表数据
    // 打开或者跳转新的页面
});

整个数据返回值

因为整个图表数据没有获取到具体的返回值信息所以该方法仅适合做简单些的逻辑处理

3.点击图标单条信息

// 针对单条数据信息的点击
myChart.on("click", (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;
});

单挑数据返回值

红框部分就是具体的一些数据值，可以拿来实现想要的业务场景

总结

按照惯例附上官网文档：
Echarts 事件与行为 - 使用手册