echarts饼图渐变色
时间: 2023-09-07 17:17:39 浏览: 102
ECharts 饼图支持渐变色,可以通过以下方式设置:
1. 在 `series` 中设置 `color` 为一个渐变色数组。
2. 在 `series` 中设置 `itemStyle` 的 `color` 属性为一个渐变色对象。
下面是一个示例:
```javascript
option = {
series: [{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
color: [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#ff0000'
}, {
offset: 1,
color: '#00ff00'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#0000ff'
}, {
offset: 1,
color: '#ffff00'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#00ffff'
}, {
offset: 1,
color: '#ff00ff'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#ff6600'
}, {
offset: 1,
color: '#0066cc'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#9900cc'
}, {
offset: 1,
color: '#00cc66'
}])
],
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
color: function(params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#ff0000'
}, {
offset: 1,
color: '#00ff00'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#0000ff'
}, {
offset: 1,
color: '#ffff00'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#00ffff'
}, {
offset: 1,
color: '#ff00ff'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#ff6600'
}, {
offset: 1,
color: '#0066cc'
}]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#9900cc'
}, {
offset: 1,
color: '#00cc66'
}])
];
return colorList[params.dataIndex]
}
}
}]
};
```
在上面的示例中,我们为每个饼图块设置了不同的渐变色,并且同时设置了 `series` 的 `color` 和 `itemStyle` 的 `color` 属性。你可以根据自己的需求进行修改。
阅读全文