当前栏目
图表绘制之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彪叔” 可以及时收到更多有价值的文章。
相关文章
- JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
- Frida - App逆向 JavaScript代码注入 基本语法以及数据类型介绍
- App逆向案例 X嘟牛 - Frida监听 & WT-JS工具还原(一)
- java调用js脚本语言
- 使用json-path解析json
- 修改vscode launch.json, 实现在指定conda环境下debug
- 第120期:Next.js 和 React 到底该选哪一个?
- Jst刷LeetCode--字符串类解题技巧
- 用javascript分类刷leetcode---动态规划
- 使用Js怒刷LeetCode
- 22道js输出顺序问题,你能做出几道
- 【重点】快速记忆JavaScript的数组api
- 实习生妹子问我怎么对接微信支付(H5、JSAPI、小程序)
- nodejs初识
- js模板引擎laytpl的使用
- Node中导入模块require和import??
- vuejs 入门
- Node.js用fs.renameSync报cross-device link not permitted错
- Node入门
- 微信开发——测试号申请,接口配置,JS接口安全域名,自定义菜单