echart图表markPoint的使用

最新推荐文章于 2024-05-06 15:49:21 发布

weixin_45353536

最新推荐文章于 2024-05-06 15:49:21 发布

阅读量1.2k

点赞数

分类专栏： vue3+ts 文章标签： echarts typescript vue.js

本文链接：https://blog.csdn.net/weixin_45353536/article/details/129452267

版权

echart文档推荐

1.官方文档
https://echarts.apache.org/zh/api.html#echartsInstance.setOption
2.官网的编辑器
调试官网echart使用
https://echarts.apache.org/examples/zh/editor.html?c=line-simple
3.测试echarts的编辑器
测试vue3版本的调试器，可以在这里调试完再搞到代码中去。
https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue

一、echart MarkPoint组件接入

在echart的折线图上设置点标注
1.markPoint组件接入的地方，类似于这种组件都需要按需引入
在这里插入图片描述
2.markPoint事件，需要设置实例之前

echartInstance.on("click", function (params) {
   
    if (params.componentType === "markPoint") {
   
      emit("clickPoint", params.data, params.dataIndex);
      // 点击到了 markPoint 上
      if (params.seriesIndex === 5) {
   
        console.error(
          params,
          "点击到了 index 为 5 的 series 的 markPoint 上。"
        );
      }
    } else if (params.componentType === "series") {
   
      if (params.seriesType === "graph") {
   
        if (params.dataType === "edge") {
   
          // 点击到了 graph 的 edge（边）上。
          console.error(params, "点击到了 graph 的 edge（边）上");
        } else {
   
          // 点击到了 graph 的 node（节点）上。
          console.error(params, "点击到了 graph 的 node（节点）上");
        }
      } else {
   
        //点击了chart曲线上的点，非markPoint
        emit("addPoint", params);
      }
    }
  });
  echartInstance.setOption(optionObj);

3.markPoint的数据使用
markPoint: false,
markPoints: [],

 if (baseOptions.value.markPoint) {
   
      obj.markPoint = {
   
	        label: {
    show: true },
	        data: baseOptions.value.markPoints
	      };
	}
}

function getSeriesData() {
   
  const arr = [];
  baseOptions.value.chartData.yList.forEach((item, index) => {
   
    // 对echarts数据做处理
    let obj: {
    [propName: string