美文网首页
大屏可视化之番外篇图标/图表制作

大屏可视化之番外篇图标/图表制作

作者: ITman彪叔 | 来源:发表于2020-02-20 15:47 被阅读0次

    在很多可视化项目中,会用到不少的小图标或者简单的chart图表之类的。

    实际项目开发中,往往是让设计人员把相关的图标做成矢量图或者位图,交给开发人员,开发人员直接使用到实际的项目中去。

    事实上,一些简单的图标,也可以直接使用代码来绘制生成。

    通过代码来生成的优势在于:

    一是不占用太多的空间,太多的图片资源对于项目的加载会有性能瓶颈。

    二是,通过代码生成的图标,可以通过配置属性来实现不同的风格,甚至可以做类似一键皮肤更换的效果

    三是,通过代码生成的图标,可以实现动态的效果,实时数据驱动动效。

    当然,代码生成的缺点是,不是什么图标都可以通过代码来实现,特别是一些特别丰富效果的图标,代码实现的难度挺大。

    因此,需要根据实际情况,选择最适合的解放方案,不可一概而论。

    在我们的产品拓扑大屏编辑器中,有一个图元编辑功能。图元编辑功能,可以通过配置实现代码生成图标的效果。

    下面,我们示意一些图标的制作。

    图标1

    温度计

    上面这个图标,外面几个部分都是圆形和圆环,都是比较容易制作的,比较难的是中间的一个类似温度计的部分。

    温度计的下面部分是一个圆形。 也是比较简单的部分,而上面是一个上面细下面粗的形状。 对于这个部分,我们可以使用基础形状梯形来制作:

    梯形组件

    首先在页面上面拖出一个梯形,然后调整期属性为填充,边框大小为1,边角样式为 “圆角”,梯形形状为“等腰梯形”:

    梯形属性

    调整梯形的上下边的长度,得到如下的图形:


    调整了尺寸的梯形

    然后在其下面放置一个圆形,便有了温度计的效果:


    温度计

    加上各种圆形的和圆环的效果便得到如下的效果:


    图标

    图标2

    image.png

    首先分析图标上面的元素,基本都是有圆形或者圆形组成,除了那个白色的类似回形针形状的效果:


    回形针

    其实要实现上面效果,使用基本的图元矩形即可,只是给矩形加上圆角。首先拖一个矩形,调整大小:


    矩形

    然后指定合适的圆角半径,即可得到需要的图形:


    圆角矩形

    加上圆形 圆环等,即可得到下面的图标:

    image.png

    图标3

    如下的图标:


    图标3

    和前面的图标一样,只需要看看中间的线段部分如何绘制即可。要绘制线段,可以使用连接体中的连线:


    连线

    通过连接体可以绘制出以下的形状:


    image.png

    通过把上面的形状和圆形组合,即可以得到目标中的图形。

    图标4,5

    如下两个图标:


    image.png

    相关思路不再赘述。

    图表

    图表可以集成echarts等相关的图表控件,但是对于一些图表,可以通过简单编辑生成。

    比如下面的一张图,是一个项目中实际用到的:


    图表

    图中有两个小的图表,两个图表比较类似,我们可以演示如何实现右边的图表效果:


    图表

    可以看出,上述图表都都是由圆形和扇形等基本图形组成的。

    首先在页面上面拖出来四个圆形,然后分别调整他们的填充颜色,大小,边框颜色,起始结束角度等,可以得到如下图形:

    基本元素

    对于第一个圆形,只需要设置图形的尺寸,然后分别设置填充色和边框颜色即可:


    第一个

    对于第二个圆形,设置尺寸,设置不显示边框但现实填充,但是把填充的颜色设置为渐变的效果:

    第二个

    对于第一个圆形,只需要设置图形的尺寸,然后分别设置填充色和边框颜色,并设置其起始角度和结束角度:

    第三个

    对于第四个图形,需要勾选上“绘制扇形”的选项:

    第四个

    最终把上述基本的图形组合起来,就得到了图表效果:

    图表效果

    总结

    上述说明了一些图表和简单图表的制作工程。当然,并不是所有的图标和图表都可以都可以编辑制作。 然而对于大部分情况下,都可以做到比较好的满足度。

    相关文章

      网友评论

          本文标题:大屏可视化之番外篇图标/图表制作

          本文链接:https://www.haomeiwen.com/subject/znwzoctx.html