echarts饼图

一、需求（图中的点去掉了）

 

 

外层的壳

createEchart1() {
      let chartDom = document.getElementById('echart1');
      myChart1 = echarts.init(chartDom);
      let option;

      //let sum1={name: '总数', number: dataNum};
      let color = [ "#fec101", "#b5b8cd ", "#ff6226","#f60000","#2cc78f","#2ca7f9"]
      option = {
        tooltip: {
          trigger: 'item',
        },
        animation: true,
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            fill: "#666666",
            width: 30,
            height: 30,
            fontSize: 20
          }
        },
        series: [
          {
            color:color,
            name: '服务数量',
            center: ['50%', '50%'],
            type: 'pie',
            minAngle: 10,//最小角度
            startAngle:265, //起始角度
            radius: ['45%', '60%'],
            avoidLabelOverlap: true,
            label:{
              normal:{
                fontSize: 18,
                //padding: [-30, -56, -10, -64],
                //padding: [-30, -76, -10, -80],  //19
                padding: [-30, -100, -10, -102],
                formatter: function (param) {
                  let text = param.data.name;
                  let value = param.data.value;

                  if (text.length <= 6) {
                    return text + ':' + value
                  } else {
                    return text.substring(0, 6) + '... :' +  (value > 999 ? (value+"").substring(0, 3) + '...' :　value);
                  }
                },
                rich: {}
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20, // 第一段线 长度
                length2: 92, // 第二段线 长度
                align: 'right',

              },
              emphasis: {
                show: true
              }
            },
            //data:serviceNumber,
          }
        ]
      }
      myChart1.setOption(option);
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },

后端拿到数据后

myChart.setOption({
    graphic: {
      style: {
        text:     //dataNum是中间总数值
            String(dataNum).replace(
                /(\d)(?=(?:\d{6})+$)/g,
                "$1."
            ) +  //圆饼中心显示数据，这里是显示得总数
            "\n\n" + "总数",
        textAlign: "center",
      }
    },
    series: [{
      data: service,  //service是后台拿来的列表数据
    }]
  })