在很多可視化項目中，會用到不少的小圖標或者簡單的chart圖表之類的。
實際項目開發中，往往是讓設計人員把相關的圖標做成矢量圖或者位圖，交給開發人員，開發人員直接使用到實際的項目中去。
事實上，一些簡單的圖標，也可以直接使用代碼來繪製生成。
通過代碼來生成的優勢在於：
一是不佔用太多的空間，太多的圖片資源對於項目的加載會有性能瓶頸。
二是，通過代碼生成的圖標，可以通過配置屬性來實現不同的風格，甚至可以做類似一鍵皮膚更換的效果
三是，通過代碼生成的圖標，可以實現動態的效果，實時數據驅動動效。
當然，代碼生成的缺點是，不是什麼圖標都可以通過代碼來實現，特別是一些特別豐富效果的圖標，代碼實現的難度挺大。
因此，需要根據實際情況，選擇最適合的解放方案，不可一概而論。
在我們的產品拓撲大屏編輯器中，有一個圖元編輯功能。圖元編輯功能，可以通過配置實現代碼生成圖標的效果。
下面，我們示意一些圖標的製作。
圖標1
上面這個圖標，外面幾個部分都是圓形和圓環，都是比較容易製作的，比較難的是中間的一個類似溫度計的部分。
溫度計的下面部分是一個圓形。 也是比較簡單的部分，而上面是一個上面細下面粗的形狀。 對於這個部分，我們可以使用基礎形狀梯形來製作：
首先在頁面上面拖出一個梯形，然後調整期屬性爲填充，邊框大小爲1，邊角樣式爲 “圓角”，梯形形狀爲“等腰梯形”：
調整梯形的上下邊的長度，得到如下的圖形：
然後在其下面放置一個圓形，便有了溫度計的效果：
加上各種圓形的和圓環的效果便得到如下的效果：
圖標2
首先分析圖標上面的元素，基本都是有圓形或者圓形組成，除了那個白色的類似回形針形狀的效果：
其實要實現上面效果，使用基本的圖元矩形即可，只是給矩形加上圓角。首先拖一個矩形，調整大小：
然後指定合適的圓角半徑，即可得到需要的圖形：
加上圓形 圓環等，即可得到下面的圖標：
圖標3
如下的圖標：
和前面的圖標一樣，只需要看看中間的線段部分如何繪製即可。要繪製線段，可以使用連接體中的連線：
通過連接體可以繪製出以下的形狀：
通過把上面的形狀和圓形組合，即可以得到目標中的圖形。
圖標4，5
如下兩個圖標：
相關思路不再贅述。
圖表
圖表可以集成echarts等相關的圖表控件，但是對於一些圖表，可以通過簡單編輯生成。
比如下面的一張圖，是一個項目中實際用到的：
圖中有兩個小的圖表，兩個圖表比較類似，我們可以演示如何實現右邊的圖表效果：
可以看出，上述圖表都都是由圓形和扇形等基本圖形組成的。
首先在頁面上面拖出來四個圓形，然後分別調整他們的填充顏色，大小，邊框顏色，起始結束角度等，可以得到如下圖形：
對於第一個圓形，只需要設置圖形的尺寸，然後分別設置填充色和邊框顏色即可：
對於第二個圓形，設置尺寸，設置不顯示邊框但現實填充，但是把填充的顏色設置爲漸變的效果：
對於第一個圓形，只需要設置圖形的尺寸，然後分別設置填充色和邊框顏色，並設置其起始角度和結束角度：
對於第四個圖形，需要勾選上“繪製扇形”的選項：
最終把上述基本的圖形組合起來，就得到了圖表效果：
總結
上述說明了一些圖表和簡單圖表的製作工程。當然，並不是所有的圖標和圖表都可以都可以編輯製作。 然而對於大部分情況下，都可以做到比較好的滿足度。
歡迎關注公衆號“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃有濃厚興趣。