echart 饼状图自定义每一块的颜色

可以通过设置 series 中的 itemStyle 属性来实现：

var myChart = echarts.init(document.getElementById(‘main’));

var option = {
title: {
text: ‘自定义饼状图颜色示例’,
subtext: ‘数据来源：示例’,
left: ‘center’
},
tooltip: {
trigger: ‘item’
},
legend: {
orient: ‘vertical’,
left: ‘left’
},
series: [
{
name: ‘访问来源’,
type: ‘pie’,
radius: ‘50%’,
data: [
{ value: 335, name: ‘直接访问’ },
{ value: 310, name: ‘邮件营销’ },
{ value: 234, name: ‘联盟广告’ },
{ value: 135, name: ‘视频广告’ },
{ value: 1548, name: ‘搜索引擎’ }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
},
itemStyle: {
// 自定义每一块的颜色
color: function(params) {
// 根据每个块的名称或索引返回不同的颜色
var colorList = [‘#ff6384’, ‘#36a2eb’, ‘#cc65fe’, ‘#ffce56’, ‘#4bc0c0’];
return colorList[params.dataIndex];
}
}
}
]
};

myChart.setOption(option);

关键步骤

1. data 数组：定义你的数据，包含每一块的值和名称。
2. itemStyle：在 series 的 itemStyle 中，使用 color 属性自定义颜色。可以通过回调函数返回颜色值，根据数据块的索引或名称进行区分。
3. colors 数组：定义一个颜色数组，里面存放你希望的每一块的颜色。

注意事项

• 如果使用 color 属性为每个数据块指定颜色，确保颜色数组的长度至少与数据块的数量相同，避免索引越界。
• 可以根据业务逻辑或者特定的条件动态设置颜色，例如根据值的大小、名称等。