最近项目中有大屏展示echarts环形图的组件,要求根据后端返回的数组来进行for循环渲染(最多渲染出3个),并且每个环形图中心需要展示相应的主题文字,随着页面的改变,字体始终保持在最中间
首先说一下解决方案,我们维护了一个对象,里边描述了只有一个环、有两个环和三个环这些情况下title的left位置
然后我们注册了window的resize时间,实时监控页面的宽度,分别在不同的像素域值中调整这个对象的参数,以此来实现字体的动态居中
我们每个环中间的字体是使用title来显示的,而不是label,最初我也使用过label的formatter属性来实现,这种方式可以让我们自定义的文案始终展示在环形图中心,但后来发现这种方法实际上的作用是在触摸环的每一扇形部分的时候在中心展示信息,而这个label又和每一个扇形部分是绑定的,所以会出现一个问题,就是鼠标在环形图中心移动的时候,环形图的扇形部分会被频繁触发,最后我就选择了使用title同时监听window的resize来动态改变字体的位置
另外补充一点:setOption属性其实有多个参数
chart.setOption(option, notMerge, lazyUpdate);
其中第二个参数也是很重要的,设定了环形图的数据更新后,是否要与前边的状态进行合并,默认值是flase,也就是不合并,在环形图数量改变的情况下,一般会产生一个问题就是更新后的环形图和更新前的环形图重叠