Echarts 解决饼图文字过长重叠的问题

野性酷女 2022-12-15 03:55 374阅读 0赞

此篇文章系转载自：[https://www.cnblogs.com/yingsu/p/10608014.html][https_www.cnblogs.com_yingsu_p_10608014.html]

之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题，找了很多一直没有一个合适的解决方案，最后自己只能花时间研究echarts文档，功夫不负有心人，终于解决了文字重叠展示不全等问题。

废话不多说，直接上图上代码

![4519cc1d36bed90527eba31ceeea14ff.png][]

这是手机屏幕的展示效果

下面再来说下我的解决方案

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

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

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

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

关键代码如下：

series: [
                {
                    type: 'pie',
                    clickable:false,　　　　　　 //是否开启点击
                    minAngle: 5,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                    avoidLabelOverlap: true,   //是否启用防止标签重叠策略
                    hoverAnimation:false,　　  //是否开启 hover 在扇区上的放大动画效果。
                    silent: true,　　　　　　　　//图形是否不响应和触发鼠标事件
                    radius: ['30%', '60%'],
                    center: ['50%', '50%'],
                    data: [],
                    label:{
                        align: 'left',
                        normal:{
                            formatter(v) {
                                let text = Math.round(v.percent)+'%' + '' + v.name
                                if(text.length <= 8)
                                {
                                    return text;
                                }else if(text.length > 8 && text.length <= 16){
                                    return text = `${text.slice(0,8)}\n${text.slice(8)}`
                                }else if(text.length > 16 && text.length <= 24){
                                    return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
                                }else if(text.length > 24 && text.length <= 30){
                                    return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
                                }else if(text.length > 30){
                                    return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
                                }
                            },
                            textStyle : {
                                fontSize : 8
                            }
                        }
                    }
                }
    
    ],

### 处理后的展示效果 ###

![6e68aec876b32aede4540fc6c0ca3f5c.png][]

# Echarts x轴文本内容太长的几种解决方案 #

参考：[https://blog.csdn.net/zm\_miner/article/details/78321254][https_blog.csdn.net_zm_miner_article_details_78321254]

还不错吧，希望能够帮助到有需要的童鞋。

[https_www.cnblogs.com_yingsu_p_10608014.html]: https://www.cnblogs.com/yingsu/p/10608014.html
[4519cc1d36bed90527eba31ceeea14ff.png]: /images/20221123/878cf0d340cb42fe876c2b30d542b0b7.png
[6e68aec876b32aede4540fc6c0ca3f5c.png]: /images/20221123/5db7aca2c82e4338958cf9a6a735db91.png
[https_blog.csdn.net_zm_miner_article_details_78321254]: https://blog.csdn.net/zm_miner/article/details/78321254