工作中遇到需要这个效果，前前后后调了两个小时图，这里记录并分享下：
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
