echats--》饼图 如何在环形中央设置 文字?

遇到一个需求,在环形图中央空白部分显示总数量。

let option = {
        title: {
          text: "报单总数",
          x: "center",
          y: "center",
          top: "185",
          textStyle: {
            fontSize: 13,
            fontWeight: "300",
            color: "#6e6e6e"
          }
        },
        color: ["#f04864", "#facc14", "#3aa0ff"], //饼状图颜色数组
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          style: {
            textAlign: "left"
          }
        },
        legend: { //设置legend模板   序列化
          formatter: function(name) {
            let pieLegendVale = {};
            data.data.filter((item, index) => {
              if (item.name == name) {
                pieLegendVale = item;
              }
            });
            return pieLegendVale.value + "\n" + pieLegendVale.name;
          },
          itemGap: 10, // 设置legend的间距
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          orient: "horizontal", //垂直显示还是水平显示
          right: 0, //legend相对位置
          bottom: 0, //legend相对位置
          textStyle: { fontSize: "14" }, //legend字体大小
          data: ["待接单", "已完成", "进行中"]
        },
        graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "43%",
            style: {
              text: data.totalNum,
              textAlign: "center",
              fill: "black", //文字的颜色
              width: 30,
              height: 30,
              fontSize: 30,
              fontFamily: "Microsoft YaHei"
            }
          }
        ],
        series: [
          {
            name: "工单完成率",
            type: "pie",
            radius: ["60%", "87%"],
            avoidLabelOverlap: false,
            data: data.data,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      };

效果如图:

猜你喜欢

转载自www.cnblogs.com/wangqi2019/p/12056224.html
今日推荐