{name|总经费} {val|8215}

描述:当前是关于Echarts图表中的 饼图 示例。
 
             var seriesData = [ 
      {
        name: "即办件",
        value: 60,
        num: 0.56,
      },
      {
        name: "承诺件",
        value: 299,
        num: 0.3,
      },
  ];
  let total = '8215';
  let title = "总经费";

      //初始化
      option = {
        title: [{    //中间的文字内容
          text: '{name|' + title + '}\n{val|' + total + '}',
          top: 'center',
          left: '20%',
          textStyle: {
              rich: {
                  name: {
                      fontSize: 14,
                      fontWeight: 'normal',
                      color: '#666666',
                      padding: [10, 0]
                  },
                  val: {
                      fontSize: 18,
                      fontWeight: 'bold',
                      color: '#333333',
                  }
              }
          }
      },
      {
          text: '单位:个',   //单位
          top: 20,
          left: 20,
          textStyle: {
              fontSize: 14,
              color:'#666666',
              fontWeight: 400
          }
      }],
        legend: {
          type: "plain",
          icon: "",
          left: "50%",
          top: "25%",
          align: "left",
          
          height: "100%",
          orient: "vertical",
          itemGap: 10,
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          symbolKeepAspect: false,
          textStyle: {
              rich: {
              name: {
                  width: 30,
                  fontSize: 10,
                  color: "#ffffff",
              },
              value: {
                  align: "right",
                  width: 30,
                  fontSize: 15,
                  color: "#f2111a",
              },
              count: {
                  align: "right",
                  fontSize: 20,
                  width: 30,
                  padding: [10, 0, 0, 0],
                  color: "#f2111a",
              },
              count2: {
                  align: "right",
                  fontSize:31,
                  padding: [8, 0, 0, 0],
                  color: "#f2111a",
              },
              unit: {
                  color: "#ffffff",
                  fontSize: 15,
                  width: 20,
                  padding: [8, 0],
              },
              },
          },
          // data: seriesData.map((item) => item.name),
          formatter: function (name) {
              if (seriesData && seriesData.length) {
              for (var i = 0; i < seriesData.length; i++) {
                  if (name === seriesData[i].name) {
                  return (
                      "{name| " + name + "}" +
                      "{count| " +  seriesData[i].value + "} " +
                      "{unit|" + "万元" + "}" +
                      "{count2| " +   seriesData[i].num + "%}"
                  );
                  }
              }
              }
          },
          },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: ["50%", "55%"],
            center: ["25%", "50%"],
            data: seriesData,
       
            label: {
              normal: {
                show: false,
                position: "center",
                
                // formatter: '{text|{c}}\n{b}',
                rich: {
                  text: {
                    padding: 8,
                    color: "#f2111a",
                    fontFamily: "LCDEF",
                    fontSize: 17,
                  },
                  name: {
                    fontSize: 18,
                    fontFamily: "LCDEF",
                    color: "#ffffff",
                  },
                },
              },
          
           
            },
          
          },
        ],
      }