echarts的饼图扇区带透明度设置间隙
如果你使用的是echarts是v5.5.0及以后的版本,那么直接使用padAngle属性设置相应的扇区间隔度即可。无需再往下寻求解决方法。
早期版本饼图想要设置间隙需要利用itemStyle的borderWidth和borderColor设置边框来实现,但是如果遇到设置了opacity,那么边框就会露馅,显示异常。这个时候,我们必须移除opacity,而采用给每一个扇区设置RGBA颜色来实现透明度,这样可以不对边框产生影响,从而不让我们的图显示异常。
示例代码如下:
javascript
let option = {
// 保持原有内容不变
series: [
{
name: '水果销量',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
// 保持原有内容不变
itemStyle: {
borderRadius: 4,
borderWidth: 5, // 间隙宽度
borderColor: '#fff' // 间隙颜色
},
data: [
{value: 35, name: '苹果', itemStyle: {color: 'rgba(54, 123, 224, 0.7)'}}, // 使用RGBA颜色并设置透明度
{value: 25, name: '香蕉', itemStyle: {color: 'rgba(82, 196, 26, 0.7)'}},
{value: 20, name: '橙子', itemStyle: {color: 'rgba(250, 140, 22, 0.7)'}},
{value: 15, name: '葡萄', itemStyle: {color: 'rgba(114, 46, 209, 0.7)'}},
{value: 10, name: '草莓', itemStyle: {color: 'rgba(245, 34, 45, 0.7)'}}
]
}
]
};