旅游系统/旅游网站, SpringBoot3_Vue3_MybaitsPlus, 适合作为毕业设计项目/个人简历项目
2025/12/23 3:19:13
在echarts图表上Y轴上面在各加两种类型并且每个上面分别有两条固定值的的且颜色相同的线
在ECharts中为Y轴添加固定值的参考线，可以通过配置markLine来实现。下面是一个清晰的配置示例和说明，可以帮助你快速实现需求。
| 配置项 | 说明 | 示例值 |
|---|---|---|
series[i].markLine.data | 标记线数据，可定义多条 | yAxis: 150表示在y轴值为150处画线 |
series[i].markLine.lineStyle | 标记线样式 | 可设置颜色color、宽度width、类型type等 |
series[i].markLine.label | 标记线标签 | 可设置显示位置position、格式器formatter等 |
yAxisIndex | 指定关联的y轴 | 当有多个y轴时，0为第一个，1为第二个 |
💡 实现思路与代码
下面的代码演示了如何在一个双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处画线]}}]};🎯 关键点说明
- 关联Y轴：通过
series中的yAxisIndex属性，将数据系列与特定的Y轴（通过数组索引）绑定在一起。这样，该系列下的markLine就会绘制在对应的Y轴刻度上。 - 定义固定线：在
markLine.data中，使用{ yAxis: 数值 }来指定线在Y轴上的具体位置。你可以通过name属性为这条线起个名字，它通常会显示在标签里。 - 统一颜色：在
markLine.lineStyle.color中为同一个系列下的两条线设置相同的颜色。上面示例中，关联第一个Y轴的两条线都是#5470c6（蓝色），关联第二个Y轴的两条线都是#91cc75（绿色）。
✨ 样式微调（可选）
如果你希望参考线的样式更美观，可以进一步调整：
- 虚线样式：将
lineStyle.type设置为'dashed'（虚线）或'dotted'（点线）。 - 标签位置：在
markLine.label中设置position为'start'、'middle'或'end'来控制标签在线上的位置。 - 更精确的颜色匹配：如果你希望参考线的颜色与对应数据折线的颜色完全一致，可以使用更高级的动态方法。