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