echarts给每个lengend设置不同的颜色
时间: 2023-10-19 14:23:30 浏览: 84
您可以在使用 ECharts 时,通过以下方式为每个 `legend` 设置不同的颜色:
1. 在 `option` 中设置 `color` 属性,定义颜色列表。
```javascript
option = {
color: ['#5793f3', '#d14a61', '#675bba'],
...
};
```
2. 在 `legend` 中设置 `textStyle` 属性,定义文本样式,包括 `color` 属性。
```javascript
option = {
...
legend: {
data:['legend1', 'legend2', 'legend3'],
textStyle: {
color: function(params) {
var colorList = ['#5793f3', '#d14a61', '#675bba'];
return colorList[params.dataIndex];
}
}
},
...
};
```
在 `textStyle` 中使用 `color` 属性时,传入一个函数,在函数中通过 `params.dataIndex` 获取当前 `legend` 的索引,然后根据索引返回相应的颜色即可。
上述代码中,将 `colorList` 定义为颜色列表,然后在 `color` 函数中,根据 `params.dataIndex` 获取当前 `legend` 的索引,然后返回相应索引的颜色,实现为每个 `legend` 设置不同的颜色。
希望这个回答能够帮助到您。
阅读全文