首页 前端知识 ucharts饼状图文字过长超出屏幕不显示问题

ucharts饼状图文字过长超出屏幕不显示问题

2024-10-17 10:10:46 前端知识 前端哥 181 772 我要收藏

项目场景:

在项目中通过饼状图对获取到的数据进行一个显示。


问题描述

通过ucharts中的饼状图来进行数据的显示,通过labelText属性自定义饼状图标签文字,但发现有些数据太长,超出屏幕无法显示。如图:


解决方案:

1.可以进行饼状图半径的缩小 opts.extra.pie.customRadius:?

也可以将标签文字缩小 opts.fontSize:?

但这两种方法不太好,因为无法保证文字的长度,图或字太小体验也不行。

2.进行文字的换行,但ucharts现版本不支持换行,无论是在labelText还是自定义format中添加\n,ucharts在显示时都不会换行,而是被替换成一个空格,如图:

虽然不可以进行换行,但可以对其显示进行控制,比如文字数大于6就对其进行省略,方法如下:

1.找到config.ucahrts.js这个文件,在"formatter":这个对象中自定义显示函数

2.在数据配置中进行声明使用自定义函数format,并赋值(basicChartData为组件props:chartData;使用自定义函数,则不能再使用labelText,否则format不起作用)

最终效果如图:

 

但用户体验不好,因为有时屏幕足够大能够显示全却还是会显示省略号。

3.使用echarts,echarts支持换行。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19058.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!