Echart为xAxis.axisLabel中富文本的不同部分绑定不同的点击事件处理器？

Question

我需要为红色矩形区域的图标绑定点击事件处理程序，为蓝色矩形区域绑定不同的点击事件处理程序。
现在，我不知道如何让它工作，任何帮助将不胜感激

Answer 1

我想出了一个解决办法。

您可以手动在标签后添加一个图标dom，如下代码。

var myChart = echarts.init(document.getElementById('main'));

var option = {
  // your options
};

const parent = myChart.getDom().parentElement;
const xPixel = myChart.convertToPixel({ xAxisIndex: 0 }, 2) // to get the x postion of target category

var div = document.createElement('img')
div.style = `position: absolute;top: 366px;height: 12px;left:${xPixel + 2 * 14}px` // 2 * 14 is in order to correct the left 
div.src = 'image path'
div.addEventListener('click', () => {})

if (parent) parent.appendChild(div)

您可以更改top或left来更正图标位置。

如果有人有更好的解决方案，请告诉我。

Echart为xAxis.axisLabel中富文本的不同部分绑定不同的点击事件处理器？

Echart bind different click event handler for different part of rich-text of xAxis.axisLabel in?

charts

echarts