zoukankan      html  css  js  c++  java
  • 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 + " " + 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", //文字的颜色 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 } } } ] };

    效果如图:

  • 相关阅读:
    iperf3命令使用
    python 使用多进程无法正常退出
    cfg 4 ocl
    opencv的CMakeLists.txt与makefile写法
    不需要打密码的sudo方法
    Fedora下rstudio-server安装
    Linux下突然不识别无线网卡
    Python使用opencv
    Python version 2.7 required, which was not found in the registry
    MySQL性能优化 — 实践篇1
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/12056224.html
Copyright © 2011-2022 走看看