环形图echarts 饼配置项内容和展示

       let pieData = [{
     'name': '总数量',
     'value': 89
 }]

function getDataArr(num){
     let dataArr = [];
     for (var i = 0; i < num; i++) {
         if (i % 2 === 0) {
             dataArr.push({
                 name: (i + 1).toString(),
                 value: 1,
                 itemStyle: {
                     normal: {
                         color: "#676a6c",
                         borderWidth: 1,
                         borderColor: "#676a6c"
                     }
                 }
             })
         } else {
             dataArr.push({
                 name: (i + 1).toString(),
                 value: 2,
                 itemStyle: {
                     normal: {
                         color: "rgba(0,0,0,0)",
                         borderWidth: 0,
                         borderColor: "rgba(0,0,0,0)"
                     }
                 }
             })
         }

     }
     return dataArr
 }
 var seriesArr = [];

 option = {
     grid: {
         left: '5%',
         right: '2%',
         bottom: '0%',
         top: '0%',
         containLabel: true
     },
     backgroundColor:'black',
     title: {
         text: pieData[0].name,
         left: '50%',
         top: '68%',
         textAlign: 'center',
         textStyle: {
             fontWeight: 'normal',
             fontSize: '20',
             color: 'white',
             textAlign: 'center',
         },
     },
     series: [
         {
         type: 'pie',
         name: '外层细圆环',
         radius: ['40%', '42%'],
         center: ['50%', '45%'],
         hoverAnimation: false,
         clockWise: false,
         itemStyle: {
             normal: {
                 color: '#6e7175'
             }
         },
         label: {
             show: false
         },
         data: [100]
     },
     {
         type: 'pie',
         zlevel: 3,
         silent: true,
         radius: ['17.5%', '18%'],
         center: ['50%', '45%'],
         label: {
             normal: {
                 show: false
             },
         },
         labelLine: {
             normal: {
                 show: false
             }
         },
         data: getDataArr(70)
     },
     {
         type: 'pie',
         zlevel: 3,
         silent: true,
         radius: ['25.5%', '26%'],
         center: ['50%', '45%'],
         clockWise: false,
         label: {
             normal: {
                 show: false
             },
         },
         labelLine: {
             normal: {
                 show: false
             }
         },
         data: getDataArr(100)
     },
     {
         type: 'pie',
         zlevel: 3,
         silent: true,
         radius: ['33.5%', '34%'],
         center: ['50%', '45%'],
         label: {
             normal: {
                 show: false
             },
         },
         labelLine: {
             normal: {
                 show: false
             }
         },
         data: getDataArr(150)
     },
     ],
 }


option.series[5] = {
    name: pieData[0].name,
    type: 'pie',
    clockWise: false,
    radius: ['39%', '43%'],
     itemStyle: {
         normal: {
             color: new echarts.graphic.LinearGradient(
                 0, 0, 0, 1,
                 [{
                         offset: 0,
                         color: '#0ff'
                     },
                     {
                         offset: 1,
                         color: '#5467df'
                     }
                 ]
             ),
             label: {
                 show: false
             },
             labelLine: {
                 show: false
             },
         }
     },
     hoverAnimation: false,
     center: ['50%', '45%'],
     data: [{
         value: pieData[0].value,
         label: {
             normal: {
                 formatter: function(params) {
                     return params.value;
                 },
                 position: 'center',
                 show: true,
                 textStyle: {
                     fontSize: '25',
                     // fontWeight: 'bold',
                     color: '#1cc7ff'
                 }
             }
         },
     },{
        value: 100 - pieData[0].value,
        name: 'invisible',
        itemStyle: {
            normal: {
                color: 'rgba(0,0,0,0)'
            },
            emphasis: {
                color: 'rgba(0,0,0,0)'
            }
        }
    }]
 }