在echarts图表上Y轴上面在各加两种类型并且每个上面分别有两条固定值的的且颜色相同的线

在echarts图表上Y轴上面在各加两种类型并且每个上面分别有两条固定值的的且颜色相同的线

在ECharts中为Y轴添加固定值的参考线，可以通过配置markLine来实现。下面是一个清晰的配置示例和说明，可以帮助你快速实现需求。

💡 实现思路与代码

下面的代码演示了如何在一个双Y轴的图表上，为每个Y轴添加两条颜色相同的固定线。

option={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},// 定义两个Y轴yAxis:[{type:'value',name:'左侧Y轴指标A'},{type:'value',name:'右侧Y轴指标B',position:'right'// 将第二个Y轴放在右侧}],series:[{name:'数据A',type:'line',yAxisIndex:0,// 此系列关联第一个Y轴（索引0）data:[120,132,101,134,90,230,210],// 为第一个Y轴类型添加两条固定线markLine:{silent:true,// 禁用鼠标事件，使线不交互lineStyle:{color:'#5470c6',// 第一条线的颜色width:2},data:[{yAxis:150,name:'警戒线A1'},// 在y=150处画第一条线{yAxis:180,name:'目标线A2'}// 在y=180处画第二条线]}},{name:'数据B',type:'line',yAxisIndex:1,// 此系列关联第二个Y轴（索引1）data:[20,32,41,54,60,73,85],// 为第二个Y轴类型添加两条固定线markLine:{silent:true,lineStyle:{color:'#91cc75',// 第二条线的颜色width:2},data:[{yAxis:50,name:'警戒线B1'},// 在第二个Y轴的y=50处画线{yAxis:70,name:'目标线B2'}// 在第二个Y轴的y=70处画线]}}]};

🎯 关键点说明

1. 关联Y轴：通过series中的yAxisIndex属性，将数据系列与特定的Y轴（通过数组索引）绑定在一起。这样，该系列下的markLine就会绘制在对应的Y轴刻度上。
2. 定义固定线：在markLine.data中，使用{ yAxis: 数值 }来指定线在Y轴上的具体位置。你可以通过name属性为这条线起个名字，它通常会显示在标签里。
3. 统一颜色：在markLine.lineStyle.color中为同一个系列下的两条线设置相同的颜色。上面示例中，关联第一个Y轴的两条线都是#5470c6（蓝色），关联第二个Y轴的两条线都是#91cc75（绿色）。

✨ 样式微调（可选）

如果你希望参考线的样式更美观，可以进一步调整：

• 虚线样式：将lineStyle.type设置为'dashed'（虚线）或'dotted'（点线）。
• 标签位置：在markLine.label中设置position为'start'、'middle'或'end'来控制标签在线上的位置。
• 更精确的颜色匹配：如果你希望参考线的颜色与对应数据折线的颜色完全一致，可以使用更高级的动态方法。