4个饼状图echarts 饼配置项内容和展示

       let unit='公顷';
      var fourPieData = [
        {
          name: '社区总数',
          max: 3500,
          value: 1185
        }, {
          name: '村总数',
          max: 3200,
          value: 2011
        }, {
          name: '社区工作者数',
          max: 30000,
          value: 24737
        }, {
          name: '社会工作师数',
          max: 30000,
          value: 8757
        }];
 let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "#2ac9e1",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      };
      var titleArr = []; var seriesArr = [];
      var colors = [['#57bbf7', '#2657a4'], ['#ffc969', '#2657a4'], ['#f38b97', '#2657a4'], ['#b1d882', '#2657a4'], ['#c0acf9', '#2657a4']]
      fourPieData.forEach(function (item, index) {
        titleArr.push(
          {
            text: '{a|' + item.name + '}\n{b|' + item.value + '}{c|' + unit + '}',
            textAlign: 'center',
            left: index < 2 ? index * 50 + 25 + '%' : index * 50 - 75 + '%',//如果一行四个就是按25*
            top: index < 2 ? "30%" : "65%",
            textStyle: {
                textAlign: 'center',
              rich: {
                a: {
                  fontSize: 12,
                  color: '#bed7f8',
                  textAlign:'center',
                //   padding: [0, 0, 0, 0]
                },
                b: {
                  fontSize: 14,
                  color: colors[index][0],
                  padding: [6, 0, 6, 0]
                },
                c: {
                  fontSize: 12,
                  color: '#bed7f8',
                  padding: [5, 5]
                }
              }
            }
          }
        );
        seriesArr.push(
          {
            type: 'pie',
            zlevel: 3,
            silent: true,
            center: [index < 2 ? index * 50 + 25 + '%' : index * 50 - 75 + '%', index < 2 ? "20%" : "55%"],
            radius: [65, 66],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: dataArr
          },
          {
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [45, 60],
            itemStyle: {
              normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
              }
            },
            hoverAnimation: false,
            center: [index < 2 ? index * 50 + 25 + '%' : index * 50 - 75 + '%', index < 2 ? "20%" : "55%"],
            data: [{
              value: item.value,
              label: {
                normal: {
                  formatter: '{d}%',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    color: colors[index][0]  //跟随其他颜色
                  }
                }
              },
            }, {
              value: item.max - item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }]
          }
        );
      });
      var option = {
        backgroundColor: "#003366",
        title: titleArr,
        series: seriesArr
      };