echarts饼图取消空心
时间: 2024-11-05 21:26:19 浏览: 18
echarts饼图扇区添加点击事件的实例
ECharts是一个强大的数据可视化库,在创建饼图时,如果你想让某个部分不是空心的,即填充颜色,你可以设置`radius`属性。默认情况下,ECharts的饼图部分是有一些内切圆的,看起来像空心的。如果你想要实现实心的效果,可以在`series`对象的配置项中找到`radius`,将其设置为一个小于1的值,例如0.8、0.75等。这里是一个例子:
```javascript
option = {
series: [{
type: 'pie',
radius: ['40%', '60%'], // 第二个参数通常设为大于第一个的值,这里是60%,表示外部半径
data: [
{ value: 335, name: 'JavaScript' },
{ value: 310, name: 'Python' },
{ value: 330, name: 'CSS' },
{ value: 300, name: 'HTML' }
],
itemStyle: {
emphasis: { // 高亮样式
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: { // 默认样式
label: {
show: true, // 显示标签
position: 'center', // 标签位置
distance: -5, // 标签与扇区边缘的距离
formatter: '{b} : {c}%'
},
color: ['#fff', '#f00', '#00f', '#0f0'] // 各区域的颜色,从外到内的顺序
}
}
}]
};
```
在这个示例中,通过调整`radius`属性和`itemStyle`里的颜色设置,你可以得到实心的饼图部分。
阅读全文