echart用极限bar类型画一个多个环形，千万别用pie类型画多层环形

今天来教大家画一个多环形，千万不要用bar类型画多个圆环，我之前就是走这错误的路线，效果不好，还费时间，今天用bar类型给大伙展示下，看效果

const pieType = [  { id: 0, name: 'a' },  { id: 0, name: 'b' },  { id: 0, name: 'c' },  { id: 0, name: 'd' }]
// const colorArr = ['#5573EB', '#2DD76E', '#FFAA23', '#784BFF']
const optionChart1 = {
  title: '办结率',
  max: 100,
  radiusAxisData: ['80%', '69%', '90%', '98%'],
  seriesData: [80, 69, 90, 98]
}
const colorArr = ['#5573EB', '#2DD76E', '#FFAA23', '#784BFF']
  const radiusAxis = <any>[]
  optionChartData.radiusAxisData.map(item => {
    radiusAxis.push({
      value: item, textStyle: { color: '#fff' }
    })
  })
 const option = {
    title: {
      text: optionChartData.title,
      left: 'center',
      textStyle: {
        color: '#FFFFFF',
        fontSize: 16,
        textAlign: 'center'
      }
    },
    angleAxis: {
      max: optionChartData.max || null,
      startAngle: -90,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: { show: false },
      axisLabel: { show: false }
    },
    tooltip: {
      formatter: (param: any) => {
        return `${param.marker}${pieType[param.dataIndex].name} &nbsp ${param.name}`
      }
    },
    radiusAxis: {
      type: 'category',
      axisLine: { show: false },
      axisTick: { show: false },
      data: radiusAxis,
      axisLabel: {
        interval: 0
      },
      z: 10
    },
    polar: {
      radius: [20, '85%'],
      center: ['50%', '55%']
    },
    series: [
      {
        type: 'bar',
        data: optionChartData.seriesData,
        coordinateSystem: 'polar',
        // name: 'Without Round Cap',
        roundCap: true,
        showBackground: true,
        barCategoryGap: '40%',
        itemStyle: {
          normal: {
          // 每个环形的颜色
            color: function (param: any) {
              return colorArr[param.dataIndex] || colorArr[0]
            }
          }
        }
      }
    ]
  }

有不懂的，欢迎来评论讨论