echart 饼图添加空隙

来源于：https://www.cnblogs.com/BeatOnDreamOn/p/15599120.html

1背景是纯色的

1875981-20211124171418938-1947614451.png

2.背景是渐变色的

[图片上传中...(2)2FZ[VS]Y8WB}SJ37~51.png-d2a648-1659333024410-0)]

1875981-20211124172319040-634317796.png

动态设置空隙

 this.transportDataLegend = [
        {
          value: 1048,
          name: '美团',
          itemStyle: { color: 'transparent' }
        },

        {
          value: 2036,
          name: '迅蚁',
          itemStyle: { color: 'transparent' }
        },
        {
          value: 580,
          name: '韵鹞',
          itemStyle: { color: 'transparent' }
        },
        {
          value: 100,
          name: '丰翼',
          itemStyle: { color: 'transparent' }
        }
      ]
      // 设置饼图空隙
      var list = []
      for (var i = 0; i < this.transportDataLegend.length; i++) {
        if (this.transportDataLegend[i].value !== 0) {
          list.push(this.transportDataLegend.slice(i, i + 1))
        }
      }
      var emptyValue = this.getEmptyValue(this.transportDataLegend)
      list.forEach(item => {
        item.push({ value: emptyValue, name: '', itemStyle: { color: 'transparent' } })
      })
      this.transportData = [].concat.apply([], list)
    })

获取空隙value值

 // 获取空隙value值
    getEmptyValue (list) {
      var max = 0
      list.forEach(item => {
        if (item.value > max) {
          max = item.value
        }
      })
      var emptyValue = Math.round(max / 40)
      console.log(emptyValue)
      return emptyValue
    },