原创

图表绘制之RepeatNode的妙用

图表绘制之RepeatNode的妙用

前言

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

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

智能概述v4.0.png

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

使用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,大功告成

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

效果图展示

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

2020.12.13_17.17.49.jpg
2020.12.13_17.18.31.jpg
2020.12.13_17.19.01.jpg

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webgl智慧楼宇发光效果算法系列之高斯模糊

    如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。

    用户3158888
  • webgl实现径向模糊

    径向模糊,是一种从中心向外呈幅射状,逐渐模糊的效果。 因此径向模糊经常会产生一些中心的发散效果,在PS中同样也有径向模糊的滤镜效果。 径向模糊通常也称为变焦模糊...

    用户3158888
  • WebGL 着色器偏导数dFdx和dFdy介绍

    偏导数函数(HLSL中的ddx和ddy,GLSL中的dFdx和dFdy)是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令(函数)。在WebGL...

    用户3158888
  • 从0到1实现一个简单计算器

    学习编程语言最重要的就是实践。很多小伙伴在学习完编程语言后,一直停留在基础阶段,只懂一大堆理论知识,而不懂得实践。那么,今天我们一起来动手做一个小计算器,回顾下...

    CodeVald
  • 汇编入门demo(win/mac)

    汇编流程, 云+的md好像不支持流程图(汗), 我给出md的流程图代码和对应图片.

    sean_yang
  • 腾讯位置服务地图选点组件使用示例

    在js或者数据库中保存这些信息,静态图片和地图API的调起就要用到这些信息,主要还是经纬度。

    腾讯位置服务
  • LeetCode 202. Happy Number

    ShenduCC
  • 我Donate,我快乐

    昨天由于太忙,没有发文章。今天看了一下统计信息,3篇图文信息的阅读人数分别人34、41、20,虽然最后一篇发的比较晚,但也过去两天了,看来,周末时间看的人比较少...

    用户1506126
  • HDFS查看文件内容

    休辞醉倒
  • MySQL回收站设计

    今天完善了一小部分的周期表的内容,所谓周期表就是我们业务中经常看到的日表,比如表名为test_data,则日表的表名为test_data_20190822,te...

    jeanron100

扫码关注云+社区

领取腾讯云代金券