在很多可视化项目中，都会用到很多小图标或者简单的图表。在实际项目开发中，经常会要求设计师将相关图标制作成矢量图形或位图，交给开发人员，开发人员可以直接在实际项目中使用。其实一些简单的图标也可以直接用代码绘制生成。代码生成的优点是：第一，不占用太多空间，图片资源太多会造成项目加载的性能瓶颈。二是代码生成的图标可以配置实现不同的风格，甚至可以实现一键更换皮肤的效果。三是代码生成的图标可以实现动态效果和实时数据驱动的动态效果。当然，代码生成的缺点是不是所有的图标都可以用代码实现，尤其是一些效果特别丰富的图标，代码实现起来还是比较困难的。因此，要根据实际情况选择最合适的解放方案，不能一概而论。在我们的产品拓扑大屏编辑器中，有图形元素编辑功能。图元编辑功能可以通过配置实现代码生成图标的效果。下面，我们举例说明一些图标的制作。icon1上面的icon，外围是圆形和环形，比较容易制作。比较难的部分是类似于温度计的中间部分。温度计的下部是一个圆圈。也是比较简单的部分，top是上薄下厚的形状。对于这部分，我们可以使用基本形状的梯形来制作：先在页面上拖出一个梯形，然后调整period属性为fill，bordersize为1，角样式为“圆角”，梯形形状为“等腰梯形”：调整梯形上下两边的长度，得到如下图形：然后在下面放一个圆，有温度计的效果：添加各种圆环效果，得到如下效果：icon2首先分析icon上的元素，基本都是圆圈或者圆圈组成，除了白色回形针效果：其实要实现上面的效果，就是用基本的原始矩形，在矩形上加一个圆就行了喇叭。先拖一个矩形，调整大小：然后指定合适的圆角半径，就可以得到需要的图形：添加圆环等，可以得到如下图标：图标3下面的图标：同上一个图标，看看中间的线段是怎么画的。绘制线段，可以使用connector中的connection：通过connector可以绘制出如下形状：将上面的shape与圆组合，就可以得到target中的图形。图标4和5为以下两个图标：相关思路在此不再赘述。ChartsCharts可以和echarts等相关的图表控件集成，但是对于一些图表，可以通过简单的编辑生成。比如下图是在一个项目中实际使用的：图中有两个小图表，两个图表很相似。我们可以演示如何实现右边图表的效果：可以看出，上面的图表都是由圆圈、扇形等基本图形组成的。先在页面上拖出四个圆，然后调整它们的填充颜色、大小、边框颜色、起止角度等，就可以得到如下图形：对于第一个圆，只需要设置其大小图形，然后分别设置填充颜色和边框颜色：对于第二个圆，设置大小，设置边框不显示但填充逼真，但将填充颜色设置为渐变效果：对于第一个圆，只需要设置图形，然后分别设置填充颜色和边框颜色，并设置它的起始角度和结束角度：第四张图需要勾选“绘制扇形”的选项：最后结合以上基本数字得到图表效果：总结以上展示了一些图表和简单的图表制作项目。当然，并不是所有的图标和图表都可以编辑。然而，对于大多数情况，可以获得更好的满意度。欢迎关注公众号“IT人飚大叔”。飚叔，10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。对计算机图形学、WebGL、前端可视化有深入研究。对程序员思维能力的训练与训练，程序员职业生涯规划有着浓厚的兴趣。
