echarts 圆饼图空心中间加文字

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   //颜色
      };

 

  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值