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

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

    let data = {
        totalNum: "",
        data: [
          { value: 335, name: "待接单" },
          { value: 310, name: "已完成" },
          { value: 234, name: "进行中" }
        ]
      };
      let n = 0;
      orderData.data.forEach(item => {
        n += Number(item.value);
      });
      orderData.totalNum = n;


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 } } } ] };

效果如图:

posted @ 2019-12-17 18:58  我是一名好程序员  阅读(1053)  评论(0编辑  收藏  举报