饼图修改引导线，相邻数据留白，给每个item项设置相应的边框颜色

  

留白方式一、

效果图：

如果背景颜色是纯色（如纯白色）那么可以直接使用 itemStyle 的 border 属性

在 series 里面的 itemStyle 里面增加和背景色一样的 border 可以给 item 间留间隙

配置项： 

const pieChartData = [
  {
    legendname: 'aaa',
    value: 53,
    percent: '15.4%',
    itemStyle: {
      color: '#e7e702'
    },
    name: 'aaa | 15.4%'
  },
  {
    legendname: 'bbb',
    value: 67,
    percent: '22.4%',
    itemStyle: {
      color: '#8d7fec'
    },
    name: 'bbb | 22.4%'
  },
  {
    legendname: 'ccc',
    value: 53,
    percent: '15.4%',
    itemStyle: {
      color: '#e7e702'
    },
    name: 'ccc | 15.4%'
  }
]
option = {
  title: [{
    text: '第一个title',
    textStyle: {
      fontSize: 14,
      color: '#666'
    },
    left: 20,
    top: 20
  }, {
    text: '中间的title',
    textStyle: {
      fontSize: 14,
      color: '#999'
    },
    subtext: 266,
    x: '34.5%',
    y: '42.5%',
    subtextStyle: {
      fontSize: 28,
      color: '#333'
    },
    textAlign: 'center'
  }],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    height: 250,
    left: '70%',
    top: 'middle',
    textStyle: {
      color: '#8c8c8c'
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      const str = params.seriesName + '<br />' +
        params.marker + params.data.legendname + '<br />' +
        '数量：' + params.data.value + '<br />' +
        '占比：' + params.data.percent + '%'
      return str
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderWidth: 0,
    textStyle: {
      color: '#fff'
    }
  },
  series: [{
    name: '数据分布',
    type: 'pie',
    data: pieChartData,
    label: {
      normal: {
        show: true,
        position: 'outside',
        formatter: function (params) {
          return params.data.legendname
        }
      }
    },
    center: ['35%', '50%'],
    radius: ['45%', '60%'],
    // labelLine 可以设置饼图到label的连线样式，length和length2设置两根引导线的长度
    labelLine: {
      normal: {
        length: 20,
        length2: 30,
        smooth: false,
        lineStyle: {
            color: '#c00',
            width: 4
        }
      }
    },
    clockwise: false,
    // 这里给每个item 设置一个border,颜色和背景色一样，就可以看到item之间隔了间隔
    itemStyle: {
      borderWidth: 4,
      borderColor: '#fff'
    }
  }]
}

留白方式二、

效果图：

 

如果背景颜色是比较复杂的，还带透明的，则可以利用给每个数据项后面增加一个数据项，增加的数据项的 itemStyle 的颜色设为透明色

注意：

1、这时候算百分比的时候需要手动计算总数，各个数据项来相除计算

2、鼠标移上去时，留白处也会显式，这时候可以在留白的数据项添加 tooltip :{show: false}，当使用formatter 函数的时候，这个属性将不会生效，则可以在 formatter 函数中返回空字符串 ""

3、给每个item项可以设置相对应的border，可以在相应的数据项对象里面设置 itemStyle：{normal:{borderColor: '#c00', borderWidth:2}}

配置项：

let pieData = [{
  name: 'aaaa',
  value: 200
}, {
  name: 'bbb',
  value: 200
}, {
  name: 'ccc',
  value: 200
}, {
  name: 'ddd',
  value: 200
}]

const pieColors = [
  'rgba(0, 238, 124, 0.6)',
  'rgba(162, 163, 165, 0.5)',
  'rgba(248, 146, 1, 0.5)',
  'rgba(15, 255, 171, 0.6)'
]
const borderColors = [
  '#00e884',
  '#a5a6a7',
  '#f48f02',
  'rgb(15, 255, 171)'
]

// total 在计算百分比的时候需要
let total = pieData.reduce((prev, cur) => (prev += cur.value), 0)

// 最终生成的pie数据
let resPieData = []

for(let i= 0; i < pieData.length; i++) {
  resPieData.push({
    value: pieData[i].value,
    name: pieData[i].name,
    itemStyle: {
      normal: {
        color: pieColors[i],
        // 每个item项设置相应的边框和颜色
        borderWidth: 1.4,
        borderColor: borderColors[i],
        shadowBlur: 10,
        shadowColor: 'rgba(1, 132, 250, 0.2)'
      }
    }
  }, {
    // 空白的宽度，根据数据量可以动态计算
    value: Math.sqrt(total / 2),
    name: '',
    itemStyle: {
      normal: {
        color: 'transparent'
      }
    },
    // 如果不用 formatter, 鼠标移上去直接不显示 tooltip
    toolTip: {
      show: false
    }
  })
}

option = {
  backgroundColor: '#000',
  series: [{
    name: 'testPie',
    type: 'pie',
    radius: ['30%', '56%'],
    center: ['50%', '50%'],
    avoidLabelOverlap: false,
    label: {
      normal: {
        show: false,
        position: 'center',
        formatter: function(params) {
          // 使用了 formatter 函数后，上面的默认 toolTip:{false}不生效，
          //可以使用name 是否空值来判断
          if(!params.name) return ''
          let percent = (params.value / total * 100).toFixed(1)
          return `{percent|${percent}%} \n {name|${params.name}}`
        },
        rich: {
          name: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: 20
          },
          percent: {
            color: '#00FF8D',
            fontSize: 16,
            lineHeight: 28
          }
        }
      },
      emphasis: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 14,
          fontWeight: 'bold'
        }
      }
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    data: resPieData
  }]
}