Echarts 解决饼图文字显示不全问题

最新推荐文章于 2026-03-25 11:47:50 发布

转载最新推荐文章于 2026-03-25 11:47:50 发布 · 3.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/rachelch/p/16935929.html

标签

#echarts #前端 #javascript

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            label: {
              show: true,
              position: 'top',
              color: '#1B233E',
              formatter: function (params) {
                return params.name + ' ' + params.percent + '%'
              }
            },
            data: []
          }
        ]

修改后

series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '55%'],
            label: {
              show: true,
              position: 'top',
              color: '#1B233E',
              formatter: function (params) {
                return params.name + ' ' + params.percent + '%'
              }
            },
            data: []
          }
        ]

文字过长重叠的问题

解决方案

第一步：调整文字的显示大小，手机上文字可以更小，这里我用的是8px字号

第二步：设置最小扇区角度，minAngle（最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互）

第三步：avoidLabelOverlap（是否启用防止标签重叠策略，默认默认开启）

第四步：文字换行展示，echarts给我们提供了一个 formatter（标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用

\n换行）属性。

series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '55%'],
            minAngle: 2, // 最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            label: {
              show: true,
              position: 'top',
              color: '#1B233E',
              formatter: function (params) {
                return params.name + ' ' + params.percent + '%'
              }
            },
            data: []
          }
        ]

效果