直角扇形echarts 饼配置项内容和展示

      let roseData = [
    { value: 40, name: '烟火' },
    { value: 33, name: '水雾' },
    { value: 28, name: '雨天' },
    { value: 22, name: '晴天' },
    { value: 20, name: '阴天' },
];
const nameVal =['烟火','水雾','雨天','晴天','阴天']
const colors = ['#D05613', '#D06E3C', '#D08C59', '#D09F80', '#D0A835']
      for (let index = 0; index < roseData.length; index++) {
        roseData[index].itemStyle = {
          color: colors[index]
        }
      }

      const originDataLen = roseData.length
      const spanAngle = 90 // 需要显示的角度
      const repeatedMultiple = 360 / spanAngle
      // 这里根据要显示的角度 计算了需要插入的数据量
      const addDataLen = parseInt((repeatedMultiple - 1) * originDataLen)
      for (let index = 0; index < addDataLen; index++) {
        roseData.push({
          name: null,
          // 这里给数据置零，即在视觉上不显示
          value: 0,
          // 这里保证了异常情况下(数据都为0时)作为占位的数据在视觉上仍为不可见状态。
          itemStyle: {
            color: 'rgba(0,0,0,0)'
          },
          tooltip: {
            show: false,
            formatter: null
          }
        })
      }

option = {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: 'rgba(255, 255, 255, 0.65)'
            }
          }
        },
        legend: {
          data: nameVal,
          selectedMode: false, //图例禁止点击
          orient: 'vertical',
          x: '75%',
          y: '45%',
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            color: '#B3B5B7',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 12
          }
        },
        series: [
          {
            name: '报警占比分析',
            type: 'pie',
            roseType: 'area',
            radius: '120%',
            center: ['54%', '90%'],
            startAngle: 180,
            label: {
              show: false
            },
            data: roseData
          },
          {
            type: 'gauge',
            radius: '150%',
            center: ['54%', '90%'],
            startAngle: 180,
            endAngle: 90,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, '#343A40']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
                length: '100%',
              lineStyle: {
                color: '#343A40',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              fontSize: 0,
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              formatter: function() {
                return ''
              },
              color: 'auto'
            },
            data: []
          },
          {
            type: 'gauge',
            radius: '130%',
            center: ['54%', '90%'],
            startAngle: 180,
            endAngle: 90,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, '#343A40']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: '100%',
              lineStyle: {
                color: '#343A40',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            data: []
          },
          {
            type: 'gauge',
            radius: '110%',
            center: ['54%', '90%'],
            startAngle: 180,
            endAngle: 90,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, '#343A40']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: '80%',
              lineStyle: {
                color: '#343A40',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            title: {
              show: false,
              offsetCenter: [0, '-20%'],
              fontSize: 30
            },
            detail: {
              fontSize: 0,
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              formatter: function() {
                return ''
              },
              color: 'auto'
            },
            data: []
          },
          {
            type: 'gauge',
            radius: '90%',
            center: ['54%', '90%'],
            startAngle: 180,
            endAngle: 90,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, '#343A40']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: '80%',
              lineStyle: {
                color: '#343A40',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              fontSize: 0,
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              formatter: function() {
                return ''
              },
              color: 'auto'
            },
            data: []
          },
          {
            type: 'gauge',
            radius: '70%',
            center: ['54%', '90%'],
            startAngle: 180,
            endAngle: 90,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, '#343A40']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: '80%',
              lineStyle: {
                color: '#343A40',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false,
              fontSize: 0,
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              formatter: function() {
                return ''
              },
              color: 'auto'
            },
            data: []
          },
          {
            type: 'gauge',
            radius: '50%',
            center: ['54%', '90%'],
            startAngle: 180,
            endAngle: 90,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, '#343A40']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: '80%',
              lineStyle: {
                color: '#343A40',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              fontSize: 0,
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              formatter: function() {
                return ''
              },
              color: 'auto'
            },
            data: []
          }
        ]
      }