图表绘制之RepeatNode的妙用

图表绘制之RepeatNode的妙用

前言

最近接到许多大屏项目，其中有一个智慧大楼的项目，大致是由3d场景+数据图表组成，需要能监控实时数据、安防

监控、出入统计以及消防安全等功能如下图



但是在开发项目的时候碰到一个难题，设计稿中有一个图表类的模块，如下图。是一个由多个递增的矩形拼接而成的类似柱状图的进度条，来表示当前车位占用率的图表。

使用echarts的问题

拿到这个设计稿时，第一反应是用大家常用的Echarts来绘制这种图表，于是在chart的社区各种找已经做好的案例。经过一番搜索，找到了一个最接近的案例（链接：https://www.makeapie.com/editor.html?c=xkXD_yRDOy）大致研究了一会它的实现方式



利用两条柱状图叠到一起做为数据的真实值和背景，在加上repeat后象形柱状图作为辅助值来达到如上图的效果。



众所周知Echarts的配置项非常之多，使用麻烦且学习成本高，而且设计稿中的矩形不光有repeat还有递增的效果，这可咋办呢？

思考

看到这个只有Repeat，没有递增效果的echarts配置后(ps:也可能有其他配置或方法能实现,可以在下面留言一下,多多交流,学习学习)，突然灵光一闪，想起咱编辑器里面正有一个repeatNode的组件，稍加修改就可以简单的实现这种递增的repeat效果了。

体验RepeatNode

想到就做，立马打开编辑器，拉一个repeatNode先用用看。RepeatNode的使用方法也非常简单，在组件的模型一栏里面，直接拖到画布上就得到一个repeat区域



然后在基础形状中拖一个矩形网元到画布上，调整好宽高后拖入之前的repeatNode区域，

最后在repeatNode上配置repeat的次数和间距就好啦





以上就是repeatNode的简单用法，根据这个思路，只需要在代码中，重复的绘制矩形的时候，绘制逐渐递增高度的矩形就可以实现递增的repeatNode了！

给RepeatNode加点料

于是找到repeatNode的绘制逻辑，在绘制中加入下面的一段代码



接下来让我们在编辑器中使用来看看。勾选上启用高度递增，对齐方式调整为下对齐，起始高度设为60，递增高度改为25，大功告成



如此简单的就解决了设计稿中的难题。

效果图展示

下面贴上项目中的效果，供大家参考。

如果对可视化感兴趣，可以和我交流，微信541002349. 另外关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。