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

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

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

事实上，一些简单的图标，也能够直接使用代码来绘制生成。

经过代码来生成的优点在于：

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

二是，经过代码生成的图标，能够经过配置属性来实现不一样的风格，甚至能够作相似一键皮肤更换的效果

三是，经过代码生成的图标，能够实现动态的效果，实时数据驱动动效。

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

所以，须要根据实际状况，选择最适合的解放方案，不可一律而论。

在咱们的产品拓扑大屏编辑器中，有一个图元编辑功能。图元编辑功能，能够经过配置实现代码生成图标的效果。

下面，咱们示意一些图标的制做。

图标1

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

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

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

调整梯形的上下边的长度，获得以下的图形：

而后在其下面放置一个圆形，便有了温度计的效果：

加上各类圆形的和圆环的效果便获得以下的效果：

图标2

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

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

而后指定合适的圆角半径，便可获得须要的图形：

加上圆形 圆环等，便可获得下面的图标：

图标3

以下的图标：

和前面的图标同样，只须要看看中间的线段部分如何绘制便可。要绘制线段，可使用链接体中的连线：

经过链接体能够绘制出如下的形状：

经过把上面的形状和圆形组合，便可以获得目标中的图形。

图标4，5

以下两个图标：

相关思路再也不赘述。

图表

图表能够集成echarts等相关的图表控件，可是对于一些图表，能够经过简单编辑生成。

好比下面的一张图，是一个项目中实际用到的：

图中有两个小的图表，两个图表比较相似，咱们能够演示如何实现右边的图表效果：

能够看出，上述图表都都是由圆形和扇形等基本图形组成的。

首先在页面上面拖出来四个圆形，而后分别调整他们的填充颜色，大小，边框颜色，起始结束角度等，能够获得以下图形：

对于第一个圆形，只须要设置图形的尺寸，而后分别设置填充色和边框颜色便可：

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

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

对于第四个图形，须要勾选上“绘制扇形”的选项：

最终把上述基本的图形组合起来，就获得了图表效果：

总结

上述说明了一些图表和简单图表的制做工程。固然，并非全部的图标和图表均可以均可以编辑制做。 然而对于大部分状况下，均可以作到比较好的知足度。

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