当前位置:   article > 正文

如何让echart环形,在中间位置显示数据_环形图中间显示数字

环形图中间显示数字

如何让echart环形,在中间位置显示数据

效果图:
在这里插入图片描述在显示环形的基础上添加以下代码:
在这里插入图片描述
也即是在图表配置项中添加。
注意:会发现并没有效果,这个只是写的是显示在环形的位置,并没有让数据显示;
还需要再data中进行设置,这个很关键
在这里插入图片描述
这个必须要写,不然的话,没有数据显示,显示的格式就是第二张图上的formatter中的内容。
完整的代码

 YearPatrolChartOption2 = () => {
    const sldata = [
      { name: "未完成计划", value: 20, icon: "roundRect" },
      {
        name: "已完成计划", value: 80, icon: "roundRect", label: {
          normal: {
            show: true
          }
        }
      }
    ];
    return {
        color: ["#1676fe", "#FAB20C ", "#FA6119", "#9F51F0"],
        tooltip: {
          trigger: "item",
          fommatter: "{a} : {b}",
          confine: true,//将此权限打开后tooltip将不再溢出
        },
        // 图列组件
        legend: {
          data: lgdata,
          // 设置图例的位置
          // left: "65%",
          fommatter: "{a} : {b}",
          bottom: "5%",
          left:"35%",
          orient: "vertical",
          itemWidth: 10,//图例图形的宽度
          itemHeight: 10,
        },
        series: {
          type: "pie",
          // 饼图的位置
          // center: ["35%", "50%"],
          // 饼图的大小
          radius: ["35%", "55%"],
          data: sldata,
          label: {
            normal: {
              show: false,
              formatter: "{d}%\n{b}",
              position: "center",
              lineHight: 30,
            },
          },
        }
    };
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/105475
推荐阅读
  

闽ICP备14008679号