echarts饼图发光和饼一样颜色
时间: 2023-10-13 14:07:40 浏览: 192
echarts制作的饼状图
4星 · 用户满意度95%
要实现echarts饼图发光和饼一样颜色的效果,可以在饼图的`itemStyle`中设置`emphasis`属性,然后在`emphasis`属性中设置`shadowBlur`、`shadowColor`和`shadowOffsetX/Y`等属性,来控制发光的效果。同时,也可以通过设置`normal`属性的`color`和`emphasis`属性的`color`来保证发光和饼的颜色一样。
例如,下面是一个设置了发光效果并且颜色和饼一样的饼图的代码示例:
```javascript
option = {
series: [{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle: {
normal: {
color: function(params) {
// 设置饼的颜色
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
return colorList[params.dataIndex];
}
},
emphasis: {
color: function(params) {
// 设置发光的颜色和饼的颜色一样
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
return colorList[params.dataIndex];
},
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffsetX: 0,
shadowOffsetY: 0
}
}
}]
};
```
上面的代码中,`itemStyle`属性中的`normal`属性用来设置饼的样式,`emphasis`属性用来设置饼的高亮样式。在`normal`属性中设置了颜色,而在`emphasis`属性中设置了发光的颜色,并且通过设置`shadowBlur`、`shadowColor`和`shadowOffsetX/Y`等属性,实现了发光的效果。
阅读全文