echarts 实现 饼图扇区间隙+透明外描边

以上是UI的效果图。 功能实现思路：

1、因为项目用到的技术栈是echarts来做图标，拿到需求首先想到的是去echarts官网找实例。 2、饼图中，我们找到“饼图扇区间隙” ，比较有参考性。

3、实例的配置项中，我们可以重点关注series的配置

    padAngle: 5,    //扇区之间的间距
    itemStyle: {
        borderRadius: 10   //扇区的圆角
    },

这两项我们根据需要调整。

4、其次是扇区的透明外描边如何实现呢？ 我这边想到的方案是，series配置两个饼图（pie）。外圈的饼图增加 radius: []的值，然后修改itemStyle的颜色透明度，即可实现UI稿的样式

配置如下：

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '50%'],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 0
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        scaleSize: 15,
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ]
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '55%'],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 0,
        opacity: 0.2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        scale: false,
        label: {
          show: false
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ]
    }
  ]
};

再根据需要，调整一些其他参数，基本上能满足UI的效果，这里不详细赘述。