解决Echarts中多条markLine的Label重叠问题
Echarts中设置markLine[参考线]
const option = { title: { text: 'markLine Test' }, series: { name: '行驶里程（KM）', type: 'bar', data: [...], markLine: { data: [ { yAxis: 3000 }, { yAxis: 6000 }, { yAxis: 10000 }, ] } }}复制代码
为markLine的Label设置不同的位置
在Echarts中，我们可能会为图表设置参考线。当多个参考线的值差距比较大的时候，为参考线设置Label展示是没有问题的。但是当多个参考线的value值接近，设置Label时就会出现重叠的问题。
const option = { title: { text: 'markLine Test' }, series: { name: '行驶里程（KM）', type: 'bar', data: [...], markLine: { data: [ { yAxis: 6800 }, { yAxis: 7000 }, { yAxis: 7500 }, ] } }}复制代码
可以看出这样的交互体验是很不乐观的。Label下的position属性为Label指定位置信息。position: 'start' | 'middle' | 'end'这三个属性const option = { title: { text: 'markLine Test' }, series: { name: '行驶里程（KM）', type: 'bar', data: [...], markLine: { data: [ { yAxis: 6800, label: { position: 'start', }, }, { yAxis: 7000, label: { position: 'middle', }, }, { yAxis: 7500, label: { position: 'end', }, }, ] } }}复制代码
三条标准线的Label都完美的展示出来了。Echarts中设置多条（>3）参考线的Label
上面使用markLine设置参考线，如果需要完美的展示出Label信息，我们可以使用position属性。但是这个position属性只有3个值，当我们的参考线>3条怎么办呢？
使用markArea
const option = { title: { text: 'markLine Test' }, series: { name: '行驶里程（KM）', type: 'bar', data: [...], markLine: { data: [ [ { yAxis: 6800, }, { yAxis: 6800, name: '6800', itemStyle: { borderColor: 'red', }, label: { show: true, position: ['100%', '0'], color: 'red', }, }, ], [ { yAxis: 7000, }, { yAxis: 7000, name: '7000', itemStyle: { borderColor: 'green', }, label: { show: true, color: 'green', position: ['100%', '-10'], }, }, ], [ { yAxis: 7500, }, { yAxis: 7500, name: '7500', itemStyle: { borderColor: 'blue', }, label: { show: true, color: 'blue', position: ['100%', '-15'], }, }, ], [ { yAxis: 7800, }, { yAxis: 7800, name: '7800', itemStyle: { borderColor: 'purple', }, label: { show: true, color: 'blue', position: ['100%', '-25'], }, }, ], ], ] } }}复制代码 看一下效果，可以看出，通过这样的设置就可以完整的展示出每一个参考线的Label,
这里需要注意的就是Label下的position属性。markArea的position属性比markLine的position属性好用的多，
可以有固定的属性值，也可以是自己设置的%;但是使用markArea的缺点就是，他的线条会被图表给遮住。
如果说你对这个不介意的话可以使用markArea进行绘制参考线。如果不能接受那就只能寻求别的好方法了。如果你有更好的实现方法，欢迎留言。欢迎关注公众号