大屏可視化之番外篇圖標/圖表製做

在不少可視化項目中，會用到很多的小圖標或者簡單的chart圖表之類的。

實際項目開發中，每每是讓設計人員把相關的圖標作成矢量圖或者位圖，交給開發人員，開發人員直接使用到實際的項目中去。

事實上，一些簡單的圖標，也能夠直接使用代碼來繪製生成。

經過代碼來生成的優點在於：

一是不佔用太多的空間，太多的圖片資源對於項目的加載會有性能瓶頸。

二是，經過代碼生成的圖標，能夠經過配置屬性來實現不一樣的風格，甚至能夠作相似一鍵皮膚更換的效果

三是，經過代碼生成的圖標，能夠實現動態的效果，實時數據驅動動效。

固然，代碼生成的缺點是，不是什麼圖標均可以經過代碼來實現，特別是一些特別豐富效果的圖標，代碼實現的難度挺大。

所以，須要根據實際狀況，選擇最適合的解放方案，不可一律而論。

在咱們的產品拓撲大屏編輯器中，有一個圖元編輯功能。圖元編輯功能，能夠經過配置實現代碼生成圖標的效果。

下面，咱們示意一些圖標的製做。

圖標1

上面這個圖標，外面幾個部分都是圓形和圓環，都是比較容易製做的，比較難的是中間的一個相似溫度計的部分。

溫度計的下面部分是一個圓形。 也是比較簡單的部分，而上面是一個上面細下面粗的形狀。 對於這個部分，咱們能夠使用基礎形狀梯形來製做：

首先在頁面上面拖出一個梯形，而後調整期屬性爲填充，邊框大小爲1，邊角樣式爲 「圓角」，梯形形狀爲「等腰梯形」：

調整梯形的上下邊的長度，獲得以下的圖形：

而後在其下面放置一個圓形，便有了溫度計的效果：

加上各類圓形的和圓環的效果便獲得以下的效果：

圖標2

首先分析圖標上面的元素，基本都是有圓形或者圓形組成，除了那個白色的相似回形針形狀的效果：

其實要實現上面效果，使用基本的圖元矩形便可，只是給矩形加上圓角。首先拖一個矩形，調整大小：

而後指定合適的圓角半徑，便可獲得須要的圖形：

加上圓形 圓環等，便可獲得下面的圖標：

圖標3

以下的圖標：

和前面的圖標同樣，只須要看看中間的線段部分如何繪製便可。要繪製線段，能夠使用鏈接體中的連線：

經過鏈接體能夠繪製出如下的形狀：

經過把上面的形狀和圓形組合，便可以獲得目標中的圖形。

圖標4，5

以下兩個圖標：

相關思路再也不贅述。

圖表

圖表能夠集成echarts等相關的圖表控件，可是對於一些圖表，能夠經過簡單編輯生成。

好比下面的一張圖，是一個項目中實際用到的：

圖中有兩個小的圖表，兩個圖表比較相似，咱們能夠演示如何實現右邊的圖表效果：

能夠看出，上述圖表都都是由圓形和扇形等基本圖形組成的。

首先在頁面上面拖出來四個圓形，而後分別調整他們的填充顏色，大小，邊框顏色，起始結束角度等，能夠獲得以下圖形：

對於第一個圓形，只須要設置圖形的尺寸，而後分別設置填充色和邊框顏色便可：

對於第二個圓形，設置尺寸，設置不顯示邊框但現實填充，可是把填充的顏色設置爲漸變的效果：

對於第一個圓形，只須要設置圖形的尺寸，而後分別設置填充色和邊框顏色，並設置其起始角度和結束角度：

對於第四個圖形，須要勾選上「繪製扇形」的選項：

最終把上述基本的圖形組合起來，就獲得了圖表效果：

總結

上述說明了一些圖表和簡單圖表的製做工程。固然，並非全部的圖標和圖表均可以均可以編輯製做。 然而對於大部分狀況下，均可以作到比較好的知足度。

歡迎關注公衆號「ITman彪叔」。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。在計算機圖形學、WebGL、前端可視化方面有深刻研究。對程序員思惟能力訓練和培訓、程序員職業規劃有濃厚興趣。