echarts饼图

option = {
  backgroundColor: '#1f4279',
  color: ['#4CD57D', '#0CE5F3', '#4772E1', '#EFB062', '#4b5cc4', '#fa8c35', '#1891FF', '#12C3C3', '#FBCD14', '#F14864', '#8542E1', '#7DA6FF', '#4AC312', '#FB8F14', '#F148E7'],
  tooltip: {
    show: true,
    backgroundColor: '#02132fC9',
    borderColor: '#0D97E460',
    formatter: ' {b}: {c} ({d}%)',
    textStyle: {
      fontSize: 16,
      color: '#DCDCDC'
    },

  },
  // legend: {
  //    type: 'scroll',
  //   orient: 'vertical',
  //   right: 10,
  //   top: '30%',
  //   icon: 'rect',
  //   textStyle: {
  //     fontSize: 14,
  //     color: '#fff'
  //   },
  //   //  show: false,
  // },
  legend: {
    type: 'scroll',
       pageIconColor: "#76b9ff",
      pageIconInactiveColor: "#ccc",
      pageTextStyle: {
        color: "#76b9ff",
        fontSize: 14,
      },
    show: true,
    top: '2%',
    // right: 'center',
    bottom: '1%',
    // icon: 'rect',
    itemWidth: 10, // 图例标记的图形宽度。
    itemHeight: 10, //  图例标记的图形高度。
    textStyle: {
      color: '#ccc',
      fontSize: 12,
      padding: [0, 8, 0, 8]
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      selectedMode: 'single',
      center: ['50%', '50%'],
      radius: [0, '45%'],
      label: {
        position: 'inner',
        textStyle: {
          fontSize: 14,
          color: '#fff'
        },
        // formatter: (params) => {
        //   return `${params.name}\n\n${params.value}件`;
        // }
      },
      // labelLine: {
      //   show: false
      // },
      data: [
        // 默认和第一个数值相同
        { value: 50, name: '已解决' },
        { value: 6, name: '未解决' }
      ]
    },
    {
      name: '',
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['55%', '70%'],
      avoidLabelOverlap: false,

      // label: {
      //   textStyle: {
      //     fontSize: 14,
      //     color: '#fff'
      //   }
      // },
      label: {
        normal: {

          // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          // formatter: '{b|{b}：}{c}   {per|{d}%} ',
          formatter: '{b|{b}：}{c|{c}}   ',
          // backgroundColor: '#eee',
          borderColor: '#fff',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            // a: {
            //     color: '#fff',
            //     lineHeight: 22,
            //     align: 'center'
            // },
            // hr: {
            //     borderColor: '#fff',
            //     width: '100%',
            //     borderWidth: 0.5,
            //     height: 0
            // },
            b: {
              fontSize: 14,
              lineHeight: 33,
              fontWeight: 'bold',
              padding: [2, 4],

            },
            c: {
              color: '#fff',
              backgroundColor: '#334455',
              padding: [3, 4],
              borderRadius: 3,
            },
            // per: {
            //     color: '#fff',
            //     backgroundColor: '#334455',
            //     padding: [2, 4],
            //     borderRadius: 3,
            //     // center: ['50%', '50%']
            //     //  position: 'inside',
            // }
          }
        }
      },
     labelLine: {
                length: 20,
                length2: 30,
            },

      data: [
        { value: 56, name: '安全帽识别', },
        { value: 74, name: '反光衣识别', },
        { value: 23, name: '区域入侵识别', },
        { value: 11, name: '小型机械识别', },
        { value: 23, name: '大型机械识别', },
        { value: 11, name: '冒烟识别', },
        { value: 23, name: '场地明火识别', },
      ]
    },

  ]
};