圆环图使用示例(仅供参考) ​

// 接口数据 返回的数据是用于3个圆环图的数据
        const res = {
            data: {
                damaged_mail: {"name":"破损邮件","type":"damaged_mail","value":3},
                abnormal_receiver_mail: {"name":"无着邮件","type":"abnormal_receiver_mail","value":6},
                exception_mail: {"name":"异常邮件","type":"exception_mail","value":56},
                none_message_mail: {"name":"无信息邮件","type":"none_message_mail","value":3},
                other_exception_mail: {"name":"其他异常","type":"other_exception_mail","value":17},
                timeout_2_4h: {"name":"超时2-4h","type":"timeout_2_4h","value":16},
                multiple_round_mail: {"name":"多次往返件","type":"multiple_round_mail","value":2},
                cancel_mail: {"name":"撤单邮件","type":"cancel_mail","value":1},
                timeout_1_2h: {"name":"超时1-2h","type":"timeout_1_2h","value":131},
                timeout_0_1h: {"name":"超时1h内","type":"timeout_0_1h","value":2000},
                obr_reject: {"name":"OBR拒识","type":"obr_reject","value":24},
                timeout_mail: {"name":"超时邮件","type":"timeout_mail","value":4154},
                mail_over_4h: {"name":"超时4h以上","type":"mail_over_4h","value":7}
            }
                
        }
        // 实际用到的数据 显示一个圆环图
        const jsonData =  [
            res.data.none_message_mail,
            res.data.abnormal_receiver_mail,
            res.data.damaged_mail,
            res.data.cancel_mail,
            res.data.multiple_round_mail,
            res.data.other_exception_mail,
        ],
        const returnTotal = (num) => {
            return parseFloat(String(num)).toLocaleString();
        };
        // 图表配置
        option = {
          // backgroundColor: '#0f375f',
          legend: {
            orient: 'vertical',
            selectedMode: false,
            icon: 'rect', //图例形状
            top: '20px',
            right: '20px',
            itemWidth: 28, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 20, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
              rich: {
                a0: {
                  color: '#bbbbbb',
                  fontSize: 12,
                },
                b0: {
                  color: '#ffffff',
                  fontSize: 12,
                },
              },
            },
            formatter: function (name) {
              let target;
              for (let i = 0; i < jsonData.length; i++) {
                if (jsonData[i].name === name) {
                  target = jsonData[i].value;
                }
              }
              let arr = [
                ' {a0|' + name + '}',
                ' {b0|' + returnTotal(target) + '}' + ' {a0|' + '件' + '}',
              ];
              return arr.join();
            },
          },
          title: {
            text: '全部',
            subtext: '问题邮件',
            textAlign: 'center',
            left: '29%',
            top: '40%',
            textStyle: {
              fontSize: 16,
              color: '#ffffff',
            },
            subtextStyle: {
              fontSize: 16,
              color: '#ffffff',
            },
          },

          series: [
            // 主要展示层的
            {
              radius: ['65%', '85%'],
              center: ['30%', '50%'],
              type: 'pie',
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: false,
                },
              },
              labelLine: {
                show: false,
              },
              color: ['#23d5ff', '#17f2c3', '#fea635', '#fff092', '#e65152', '#437dff'],
              data: jsonData,
            },
            {
              name: '外边框',
              type: 'pie',
              center: ['30%', '50%'],
              radius: ['95%', '95%'],
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: false,
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 9,
                  name: '',
                  itemStyle: {
                    borderWidth: 2,
                    borderColor: '#0b5263',
                  },
                },
              ],
            },
            {
              name: '内边框',
              type: 'pie',
              center: ['30%', '50%'],
              radius: ['50%', '50%'],
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: false,
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 9,
                  name: '',
                  itemStyle: {
                    borderWidth: 2,
                    borderColor: '#0b5263',
                  },
                },
              ],
            },
          ],
        }