Echarts 扇形图标 扇形中间添加颜色和数据 图例后的汉字自定义颜色 和图例后添加百分比

1. 扇形中间添加颜色和数据   option 里面的代码

state.optionPlannedWaterWithdrawal = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              top: '10%',
              right: '18%',
              data: ['第一泄洪道', '小青龙河', '滦柏输水干渠', '其他'],
              formatter: (name) => {
                const value = arrAll.filter(x => x.name == name)[0].value;
                if(name == '第一泄洪道'){
                  return '{name|' + name + '}{value|' + value + 'm³}'
                }else if(name == '小青龙河'){
                  return '{name|' + name + '}{value1|' + value + 'm³}'
                }else if(name == '滦柏输水干渠'){
                  return '{name|' + name + '}{value2|' + value + 'm³}'
                }else if(name == '其他'){
                  return '{name|' + name + '}{value3|' + value + 'm³}'
                }
              },
              textStyle: {
                rich: {
                  name: {
                    fontSize: 15,
                    align: 'right',
                    padding: [0, 0, 0, 10],
                    // lineHeight: 40,
                  },
                  value: {
                    fontSize: 15,
                    align: 'right',
                    padding: [0, 0, 0, 10],
                    color: '#63F3DF',
                  },
                  value1: {
                    fontSize: 15,
                    align: 'right',
                    padding: [0, 0, 0, 10],
                    color: '#9A67FF',
                  },
                  value2: {
                    fontSize: 15,
                    align: 'right',
                    padding: [0, 0, 0, 10],
                    color: '#63F371',
                  },
                  value3: {
                    fontSize: 15,
                    align: 'right',
                    padding: [0, 0, 0, 10],
                    color: '#2D5BFF',
                  }, 
                }
              }
            },
            series: [
              {
                name: '地表水',
                type: 'pie',
                radius: ['60%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + 'm³';
                  }
                },
                color: ['#63F3DF', '#9A67FF', '#63F371', '#2D5BFF',],
                label: {
                  show: true,
                  position: 'center',
                  formatter: ['{a|32.689万m³}', '{b|实际取数量}'].join('\n'),
                  width: 86,
                  height: 86,
                  fontSize: 16,
                  fontWeight: 'bold',
                  backgroundColor: '#e8ddff',
                  shadowColor: '#e3e3e3',
                  shadowBlur: 15,
                  borderRadius: 39,
                  rich: {
                    a: {
                      padding: [60, 0, 0, 0],
                      color: '#000',
                      fontSize: 13,
                      fontWeight: 600,
                      lineHeight: 13
                    },
                    b: {
                      padding: [70, 0, 0, 0],
                      color: '#000',
                      fontSize: 12,
                      lineHeight: 16
                    }
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: 1048, name: '第一泄洪道' },
                  { value: 735, name: '小青龙河' },
                  { value: 735, name: '滦柏输水干渠' },
                  { value: 735, name: '其他' },
                ]
              }
            ]
          };

2.添加百分比

state.reportOption = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: 'vertical',
            right: '0%',
            top: 'center',
            data: arrs,
            formatter: (name) => {
              let total = 0
              let target
              const value = state.deptCountList.filter(x => x.name == name)[0].value
              for (let i = 0, l = state.deptCountList.length; i < l; i++) {
                total += state.deptCountList[i].value
                if (state.deptCountList[i].name == name) {
                  target = state.deptCountList[i].value
                }
              }
              const arr = [
                '{name|' + name + '}{percentage|' + ((target / total) * 100).toFixed(2) + '%}{value|' + value + '}'
              ]
              return arr.join('\n')
            },
            textStyle: {
              rich: {
                name: {
                  fontSize: 15,
                  align: 'right',
                  padding: [10, 10, 10, 0],
                  lineHeight: 40,
                },
                value: {
                  fontSize: 15,
                  align: 'right',
                  padding: [10, 10, 10, 0],
                  lineHeight: 40,
                },
                percentage: {
                  fontSize: 15,
                  align: 'right',
                  padding: [10, 10, 10, 0],
                  lineHeight: 40,
                },
              }
            }
          },
          series: [
            {
              name: "告警统计",
              type: "pie",
              radius: ["30%", "60%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                },
              },
              labelLine: {
                show: false,
              },
              data: state.deptCountList,
            },
          ],
        }