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

标签：文字 50% 扇区 不全 params formatter true Echarts

文本越界

文本超出容器边界。可以调整center值。

　　　　　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: []
          }
        ]

 最后效果

 

标签：文字,50%,扇区,不全,params,formatter,true,Echarts
From： https://www.cnblogs.com/rachelch/p/16935929.html