当前栏目
图表绘制之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彪叔” 可以及时收到更多有价值的文章。
相关文章
- 使用Golang解析Yaml、Json、Xml文件
- 写Hudi异常:'Not an Avro data file' 解决方法
- 什么是堆?有哪些使用场景?
- Go 语言一次性定时器使用方式和实现原理
- 2C 设计稿转代码是怎么实现的?自己做一个可行吗?
- 赵云叫化冻?曹操叫变巨?一文带你读懂字符编码那些事儿
- 把陷阱去掉了,反倒踩进了新的陷阱?
- 埋点统计优化,首屏加载速度提升
- React 渲染的未来,你想知道吗?
- 设计了一个支撑数亿用户的系统
- 网络又超时了......怎么办?
- Docker基础:Dockerfile相关知识介绍
- React和Next.js已死,真的要被取代了?
- 用 Charles 断点调试 HTTPS 请求,原理揭秘
- 图解 CSS Grid 布局
- 从Iphone手机误报车祸谈起
- 《前端算法实战》使用解释器模式实现Xpath路径的算法
- 排查死锁的四种工具,你学会了吗?
- 一文精通如何使用二叉树
- 面试官问:Stream 中的 map、peek、foreach 方法的区别?彻底懵了......