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

环形图

      var trafficWay = [
        {
          name: '三类项目',
          value: 20
        },
        {
          name: '天分重点',
          value: 30
        },
        {
          name: '集团重点',
          value: 50
        }
      ]
      var total = 0
      for (var i = 0; i < trafficWay.length; i++) {
        total += trafficWay[i].value
      }

      var data = []
      var color = ['#36E461', '#0BEFF9', '#9429E1']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          },
          {
            value: total * 0.04,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      var option = {
          backgroundColor:'#000',
        color: color,
        title: [{
          text: '200000',
          x: '49%',
          y: '42%',
          textAlign: 'center',
          textStyle: {
            fontFamily: 'Verdana-Bold',
            fontSize: '26',
            fontWeight: 'bold',
            color: '#FFF'
          }
        }, {
          text: '万小时',
          left: '49%',
          top: '55%',
          textAlign: 'center',
          textStyle: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: '16',
            fontWeight: '100',
            color: '#fff'
          }
        }],
        tooltip: {
          show: true
        },
        series: [
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: [75, 78],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'outside',
                  color: '#FFFFFF',
                  fontSize: 16,
                  formatter: function(params) {
                    var percent = 0
                    // var total = 0
                    // for (var i = 0; i < trafficWay.length; i++) {
                    //   total += trafficWay[i].value
                    // }
                    percent = params.percent
                    // percent = ((params.value / total) * 100).toFixed(0)
                    if (params.name !== '') {
                      return params.name + '\n' + `{a${params.dataIndex / 2}|` + percent + '%}'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    rich: {
                      a0: {
                        color: '#36E461',
                        padding: [10, 0],
                        fontSize: 15
                      },
                      a1: {
                        color: '#0BEFF9',
                        padding: [10, 0],
                        fontSize: 15
                      },
                      a2: {
                        color: '#9429E1',
                        padding: [10, 0],
                        fontSize: 15
                      }
                    }
                  }
                },
                labelLine: {
                  length: 30,
                  length2: 50,
                  show: true,
                  color: '#00ffff'
                }
              }
            },
            data: data
          }
        ]
      }