echarts折线图的图例颜色
时间: 2025-01-31 20:37:58 浏览: 41
### 修改ECharts折线图中的图例颜色
为了使ECharts折线图的图例颜色与对应的线条颜色保持一致,可以通过`textStyle.color`属性来动态设定图例文本的颜色。这通常涉及到遍历所有的系列数据,并为每一个系列指定一种特定的颜色模式。
对于图例项本身的颜色调整,则需通过`itemStyle.normal.color`来进行配置[^1]。然而,在实际应用中更常见的是利用函数形式给定颜色值的方式实现更加灵活多变的效果:
```javascript
option = {
legend: {
orient: 'vertical',
left: 'right',
textStyle: {
color: function (params) {
// 定义返回逻辑以匹配相应系列的颜色
switch(params.name){
case "SeriesA": return "#FF7F50";
case "SeriesB": return "#87CEFA";
default: return '#ccc';
}
}
},
data:['SeriesA','SeriesB']
},
series : [
{
name:'SeriesA',
type:'line',
lineStyle:{
color:'#FF7F50'
},
itemStyle: {
normal: {
color: '#FF7F50'
}
}
},
{
name:'SeriesB',
type:'line',
lineStyle:{
color:'#87CEFA'
},
itemStyle: {
normal: {
color: '#87CEFA'
}
}
}
]
};
```
上述代码片段展示了如何创建两个不同颜色的数据序列(SeriesA 和 SeriesB),并确保它们各自的图例条目以及连接这些点之间的线条都采用了相同的色彩方案[^2]。
阅读全文
相关推荐

















