echarts 趋势图巧用label富文本对某个y值进行标记

工作中遇到需要这个效果，前前后后调了两个小时图，这里记录并分享下：

image.png

代码如下：

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [[10,150], [20,230], [30,224], [40,218], [50, 135], [60, 147], [70, 260]],
      type: 'line',
      markLine: {
        label: {
          show: true,
          distance: 10,
          formatter: (param) => {
            return `{a|${param.name}}`;
          },
          rich: {
            a: {
              height: 18,
              color: 'red',
              lineHeight: 18,
              backgroundColor: '#dddddd',
              borderColor: 'red',
              borderWidth: 0.5,
              padding: [0, 8, 0, 8]
            }
          }
        },
        data: [
          [
            {
              symbol: ['none', 'arrow'],
              symbolSize: [0, 20],
              name: '内控值：' + 180,
              coord:[0, 180] // 起点用坐标，从x轴为0开始，也就是y轴开始
            },
            {
              yAxis: 180,
              x: '80%' // 终点取百分比更简单，因为有自定义富文本label，用坐标点不好计算
            }
          ]
        ]
      }
    }
  ]
};

效果如下：

image.png

完美！！！

若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/40f74fcd9dbd?v=1718098933202，转载请注明出处，谢谢。

参考：
echarts markLine