Skip to content

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)'}}
      ]
    }
  ]
};

Designed & Powerd by liujun