echarts 圆饼图空心中间加文字

echarts 圆饼图空心中间加文字_第1张图片

var option = {
        title: {
          text: circularGraph.title,  //标题文本
          left: "center",
          show: circularGraph.head  //是否显示标题组件
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        legend: {
          show: true,
          orient: "horizontal",
          x: "center",
          y: "bottom",
          data: circularGraph.tuglie,    //图例组件
          formatter: function(name) {
            let num = "";
            circularGraph.data.forEach(item => {  //格式化图例文本,支持字符串模板和回调函数两种形式。
              if (item.name === name) {
                num = String(item.value).replace(/(\d)(?=(?:\d{6})+$)/g, "$1.");
                return;
              }
            });
            return name + ":" + num;
          }
        },
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text:
              circularGraph.sum.name +  //圆饼中心显示数据,这里是显示得总数
              "\n" +
              String(circularGraph.sum.number).replace(
                /(\d)(?=(?:\d{6})+$)/g,
                "$1."
              ),
            textAlign: "center",
            fill: "#000",
            width: 30,
            height: 30,
            fontSize: 12
          }
        },
        series: [
          {
            type: "pie",
            radius: ["35%", "65%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: { color: "#3c4858", fontSize: "12" },
                  formatter: function(val) {
                    //让series 中的文字进行换行
                    return val.name + "(" + val.percent + "%)";
                  }
                },
                labelLine: {
                  show: true,
                  lineStyle: { color: "#3c4858" }
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                textColor: "#000"
              }
            },
            data: circularGraph.data  //数据
          }
        ],
        color: circularGraph.color   //颜色
      };

 

你可能感兴趣的:(echarts 圆饼图空心中间加文字)