Echarts 坐标轴标签图标添加事件

为 label 添加 icon

如果只是添加图标，可以使用 rich，代码如下：

axisLabel: {
    formatter: function (value) {
      return value == 'target value' ? `{a|${value}}{b|}` : value
    },
    rich: {
      b: {
        height: 12,
        align: 'center',
        backgroundColor: {
            image: div
        }
      },
    }
}

backgroundColor说明文档

但是这种方式，使用 Echarts 提供的 click 事件，没办法区分点击对象是图标还是标签。

添加带事件的 icon

原理

原理是获取到 label 在图标容器中的定位，来确定图标摆放位置。

实现

创建带事件的图标 dom。

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

获取目标 label 的定位，并插入图标。

const parent = myChart.getDom().parentElement;
const xPixel = myChart.convertToPixel({ xAxisIndex: 0 }, 2)
if (parent) parent.appendChild(img);

效果图

详解

横坐标的 label 高度基本是确定的，也就是 offsetY 是确定的，所以我们如果能拿到 offsetX，就能设定图标位置。

通过 myChart.convertToPixel({ xAxisIndex: 0 }, 2) 就可以拿到雪纺衫的中心位置，然后计算偏移量设置图标位置即可。