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

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

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

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

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

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

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

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

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

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

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

图标1

温度计

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

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

梯形组件

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

梯形属性

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

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

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

图标2

image.png

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

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

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

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

image.png

图标3

如下的图标:图标3

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

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

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

图标4,5

如下两个图标:image.png相关思路不再赘述。

图表

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

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

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

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

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

基本元素

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

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

第二个

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

第三个

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

第四个

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

图表效果

总结

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

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。ITman彪叔公众号