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

最新推荐文章于 2025-05-22 11:43:54 发布

Ciao_Traveler

最新推荐文章于 2025-05-22 11:43:54 发布

阅读量1.6w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： echarts的使用

本文链接：https://blog.youkuaiyun.com/weixin_44202904/article/details/109161812

echarts的使用专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在ECharts的环形图中间位置显示数据。通过详细配置图表选项，包括设置显示格式和调整标签位置，实现了在环形图中心展示数据百分比及名称的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何让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,
            },
          },
        }
    };
  }