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

项目场景:

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

问题描述

通过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不起作用)

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

建议使用echarts,echarts支持换行。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值