如何在ECharts中点击markLine标签时触发事件并显示tooltip

针对你遇到的两个问题，以下是具体的解决方案：

1. 仅触发MarkLine标签的点击事件 #

ECharts的点击事件参数中，componentType标识组件类型，element标识点击的是MarkLine的线还是标签。通过这两个字段可以筛选出仅点击标签时的操作：

myChart.on("click", (params) => {
  // 仅响应MarkLine标签的点击
  if (params.componentType === 'markLine' && params.element === 'label') {
    console.log("点击了评论标签", params);
    // 这里可添加弹出自定义文本框的逻辑
  }
});

2. 显示评论内容的Tooltip #

你可以通过两种方式实现评论内容的Tooltip展示：

方式一：配置MarkLine专属Tooltip #

直接给MarkLine配置独立的Tooltip，设置触发方式并渲染评论内容。需要先把评论数据绑定到MarkLine的data项中：

// 修改series中annotation系列的markLine配置
markLine: {
  symbol: "none",
  // 配置MarkLine的Tooltip
  tooltip: {
    trigger: 'click', // 设置点击触发
    formatter: (params) => {
      // 渲染自定义评论内容
      return `<div>评论内容：${params.data.comment}</div>`;
    }
  },
  label: {
    show: true,
    backgroundColor: "green",
    color: "white",
    formatter: "C",
    width: 20,
    height: 20,
    triggerEvent: true,
  },
  data: [{
    name: "MarkLine",
    xAxis: 1050883200000,
    comment: "2003年10月：业务数据波动调整" // 自定义评论字段
  }],
}

方式二：点击标签时手动触发Tooltip #

如果需要严格在点击标签时才显示Tooltip，可以调用ECharts的showTip方法手动触发：

myChart.on("click", (params) => {
  if (params.componentType === 'markLine' && params.element === 'label') {
    // 手动触发对应MarkLine的Tooltip
    myChart.showTip({
      seriesIndex: 1, // annotation系列的索引（对应你代码中第二个series）
      dataIndex: 0, // MarkLine数据项的索引
      position: ['50%', 'top'] // 自定义Tooltip位置
    });
  }
});

完整修改后的代码 #

<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

* {
  margin: 0;
  padding: 0;
}

#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false,
});

var svgIconStr = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22" fill="none">
<path d="M10 20L9.79075 20.4541L10 20.5505L10.2092 20.4541L10 20ZM10 20C10.2092 20.4541 10.2094 20.454 10.2096 20.4539L10.2102 20.4537L10.2119 20.4529L10.2177 20.4502L10.2383 20.4405C10.2559 20.4321 10.2814 20.42 10.3142 20.404C10.3798 20.3721 10.4746 20.325 10.5945 20.2632C10.8343 20.1394 11.1746 19.9562 11.5822 19.7158C12.3961 19.2357 13.4835 18.5243 14.5734 17.6001C16.7356 15.7664 19 13.0143 19 9.5C19 4.52944 14.9706 0.5 10 0.5C5.02944 0.5 1 4.52944 1 9.5C1 13.0143 3.26439 15.7664 5.42661 17.6001C6.5165 18.5243 7.60392 19.2357 8.41784 19.7158C8.82535 19.9562 9.16572 20.1394 9.40545 20.2632C9.52535 20.325 9.62018 20.3721 9.68577 20.404C9.71856 20.42 9.74405 20.4321 9.76172 20.4405L9.7823 20.4502L9.78806 20.4529L9.7898 20.4537L9.79037 20.4539C9.79058 20.454 9.79075 20.4541 10 20Z" fill="#05823F" stroke="white"/>
<path d="M6.5 7.58887C6.5 6.76044 7.17157 6.08887 8 6.08887H12C12.8284 6.08887 13.5 6.76044 13.5 7.58887V13.6671C13.5 14.1219 12.9421 14.3406 12.6331 14.0068L10 11.1629L7.36689 14.0068C7.05791 14.3406 6.5 14.1219 6.5 13.6671V7.58887Z" fill="white"/>
</svg>`;

var option = {
  xAxis: {
    type: "time",
  },
  yAxis: {
    type: "value",
  },
  tooltip: {
    show: true,
    trigger: "axis",
  },
  series: [{
      name: "metric",
      type: "line",
      data: [
        [1041811200000, 30429.64],
        [1043625600000, 99323.95999999999],
        [1055116800000, 32376.289999999997],
        [1055721600000, 27628.299999999996],
        [1062374400000, 42592.52],
      ],
      showSymbol: false,
    },
    {
      id: "Annotation",
      name: "annotation",
      type: "line",
      tooltip: {
        trigger: "item",
      },
      data: [
        [1050883200000, null]
      ],
      markLine: {
        symbol: "none",
        // 配置MarkLine的Tooltip
        tooltip: {
          trigger: 'click',
          formatter: (params) => {
            return `<div>评论：${params.data.comment}</div>`;
          }
        },
        label: {
          show: true,
          backgroundColor: "green",
          color: "white",
          formatter: "C",
          width: 20,
          height: 20,
          triggerEvent: true,
        },
        data: [{
          name: "MarkLine",
          xAxis: 1050883200000,
          comment: "这是一条针对该时间点的业务评论"
        }, ],
      },
    },
  ],
};

function encodeSvgToDataURI(svg) {
  return (
    "data:image/svg+xml;charset=utf8," +
    encodeURIComponent(
      svg.replace(
        "<svg",
        svg.indexOf("xmlns") > -1 ?
        "<svg" :
        '<svg xmlns="http://www.w3.org/2000/svg"'
      )
    )
  );
}

if (option && typeof option === "object") {
  myChart.setOption(option);
}

myChart.on("click", (params) => {
  if (params.componentType === 'markLine' && params.element === 'label') {
    console.log("点击了评论标签", params);
    // 若使用手动触发Tooltip，可取消下方注释
    // myChart.showTip({
    //   seriesIndex: 1,
    //   dataIndex: 0,
    //   position: ['50%', 'top']
    // });
  }
});

window.addEventListener("resize", myChart.resize);

内容的提问来源于stack exchange，提问作者kristin lee