189 8069 5689

解决某些情况下 ECharts 饼图多行标签重叠问题

解决某些情况下 ECharts 饼图多行标签重叠问题

对于多行标签的重叠问题，其实一直没有一个完美的解决方案。

成都创新互联服务项目包括静乐网站建设、静乐网站制作、静乐网页制作以及静乐网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，静乐网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到静乐省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

我能在网上查到的比较全面的解决方法就是这个：https://zhuanlan.zhihu.com/p/

但我的项目中某些东西是明确的：Label的行数、字体大小、数据个数(只有6个)、而且不必要做适配。

所以我就用曲线救国的方式避免了多行标签的重叠。

PS：我觉得5.0.0版本以上的labelLayout可能是一个更好的曲线救国方式，不过我这里是4.8.0的。

我的问题：有许多小百分比的数据，导致label重叠：

第一步：调整数组顺序

ECharts饼图的label方向似乎是固定的，所以先调整一下数组元素的顺序，让label可以不仅仅放在左边（我的需求是从小到大的顺序，这里暂时改回了单行label）。
效果：

第二步：调整数据中的labelLine.length

标签重叠是因为离得近，那我让它们离远点就好了。

代码：

//Chart配置文件
option: {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        //一些代码
                        //等会这里就需要修改了
                        data: [
                        ],
                        //一些代码
                        //这里就是标签，我想让它以某种样式显示两行
                        label: {
                            formatter: [
                                '{c|{c}}',
                                '{b|{b}}',
                            ].join('\n'),
                            rich: {
                                c: {
                                    color: "#00EDFF",
                                    fontSize: 17,
                                    fontFamily: 'PingFangSC-Semibold, PingFang SC',
                                    height:18,
                                    fontWeight: 600,
                                    align:"right",
                                },
                                b: {
                                    color: "#FFFFFF",
                                    height:18,
                                    fontSize: 14,
                                    fontWeight: 500,
                                },
                            },
                            //这里可以先设置全局的长度
                            labelLine:{
                                length:10,
                            }
                        },
                    }
                ]
            },

//处理下数据
//调数组顺序
let temp = arr.pop()
arr.unshift(temp)
temp = arr.pop()
arr.unshift(temp)
//改变标签线的长度(这里不一定要写死，如果有时间的话应该也可以通过一些算法算出来。我自己项目中也有更多的判断，这里删掉了。)
arr[0].labelLine = {}
arr[4].labelLine = {}
arr[5].labelLine = {}
arr[0].labelLine.length = 50,
arr[4].labelLine.length = 30,
arr[5].labelLine.length = 50,
this.option.series[0].data = res.data

结论：其实效果也不太好，而且长度都写死了，也可能会出现其它的问题。不过也算是勉勉强强完成需求了。如果哪个大佬有更好的解决方法，那就求求了！


网站标题：解决某些情况下 ECharts 饼图多行标签重叠问题
浏览地址：http://jkwzsj.com/article/dsojjsi.html

其他资讯