echarts饼图图例颜色
时间: 2023-10-29 13:57:37 浏览: 155
ECharts 饼图的图例颜色可以通过 series 中的 data 属性中的每个数据项的 itemStyle 属性进行设置。具体来说,可以通过设置 itemStyle 中的 color 属性来定义每个数据项对应的图例颜色。
例如,以下代码演示了如何设置饼图的图例颜色:
```javascript
option = {
...
series: [
{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
itemStyle: {
color: function(params) {
// 自定义颜色数组
var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];
return colorList[params.dataIndex];
}
}
}
]
...
};
```
在上述代码中,通过设置 itemStyle 的 color 属性为一个函数,该函数返回一个自定义的颜色数组。根据数据项的索引,选择对应的颜色。
通过这种方式,可以实现自定义饼图图例的颜色。
阅读全文
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pptx](https://img-home.csdnimg.cn/images/20241231044947.png)