echarts环形图,字体居中方案总结

最近项目中有大屏展示echarts环形图的组件,要求根据后端返回的数组来进行for循环渲染(最多渲染出3个),并且每个环形图中心需要展示相应的主题文字,随着页面的改变,字体始终保持在最中间

首先说一下解决方案,我们维护了一个对象,里边描述了只有一个环、有两个环和三个环这些情况下titleleft位置
然后我们注册了window的resize时间,实时监控页面的宽度,分别在不同的像素域值中调整这个对象的参数,以此来实现字体的动态居中
在这里插入图片描述
我们每个环中间的字体是使用title来显示的,而不是label,最初我也使用过labelformatter属性来实现,这种方式可以让我们自定义的文案始终展示在环形图中心,但后来发现这种方法实际上的作用是在触摸环的每一扇形部分的时候在中心展示信息,而这个label又和每一个扇形部分是绑定的,所以会出现一个问题,就是鼠标在环形图中心移动的时候,环形图的扇形部分会被频繁触发,最后我就选择了使用title同时监听window的resize来动态改变字体的位置

另外补充一点:setOption属性其实有多个参数

chart.setOption(option, notMerge, lazyUpdate);

其中第二个参数也是很重要的,设定了环形图的数据更新后,是否要与前边的状态进行合并,默认值是flase,也就是不合并,在环形图数量改变的情况下,一般会产生一个问题就是更新后的环形图和更新前的环形图重叠

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值