2022-5-22 純純
上次整理了一些大廠的可視化服務平臺，平臺的優勢顯而易見，組件化的操作，快速搭建的方式節省了很多的開發和時間成本。有興趣的戳這里：數據可視化大屏設計工具整理（上）。
對于上期的一些更正：8月28日百度Suger更新了收費標準，也就是說現在百度Suger也收費了！目前是分版本收費，但是對新老用戶還是提供了30天的全功能試用的。
本次整理的是下半部分的內容：
一、數據大屏與數據可視化
二、大廠的可視化服務
三、技術開源庫
四、設計輔助工具
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
三、技術開源庫
了解一些技術開源庫，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設計的可實現度，不然再炫酷的設計效果最終如果因為技術開發能力無法實現也是徒勞的。
Echarts -百度開源可視化庫
這是一個使用JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器。4.0版本還提供了對微信小程序的適配。DataV中的一些組件也是依賴Echarts生成的。
Echarts提供的圖表很多樣化，幾乎包含常用的、不常用的各類圖表樣式。且提供有可交互組件，可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。
△來源Echarts實例
Mapv - 百度地理信息可視化開源庫
用以展示大量地理信息點、線、面的數據。創建需先上傳地理信息數據，再設置地圖樣式后，即可下載保存。目前僅開放Beta版本。
△來源Mapv官網
螞蟻AntV
https://antv.alipay.com/zh-cn/index.html
螞蟻金服的Ant Design作為設計師應該都是較為熟悉的。AntV是螞蟻Ant系列下的一個數據可視化解決方案。分為G2、G6、F2、L7不同產品，分別對應不同的特性需求。
△來源AntV官網
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網站可以用來繪制地圖。有些特殊情況下，開發可能需要自己繪制地圖。如果開發自己使用canvas繪制，難度較大。這個網址提供了地圖svg、HTML以及image的下載。
△來源Amchats官網
D3.js - 數據驅動的文檔
D3js 是一個基于數據來操作文檔的JavaScript 庫，適宜用來建造各類可視化圖表。支持大型數據集和交互與動畫的動態行為。
△來源D3js官網
billboard.js - 簡易界面的可交互圖表庫
https://naver.github.io/billboard.js/
這是一個基于D3 V4+的JavaScript的圖表庫?？梢詫祿M行視圖縮放、展示細節等交互操作。
△來源billboard官網
FusionCharts
FusionCharts提供了100多個交互式圖表和2,000多個數據驅動的地圖，對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件來方便開發快速入門。不過這款是收費的，根據不同的使用環境定價不同。
△來源FusionCharts官網
四、設計輔助工具
Kitchen - 螞蟻金服官方插件
這是一個sketch的插件工具。主要功能如下圖。
△來源Kitchen官網
Iconfont 圖標庫我比較常用，可以直接在sketch中搜索拖拽，不用再去打開網頁查找了。其次數據填充也比較常用，自動填充時間地址城市等挺方便的。sketch也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以sketch自帶功能為主。
另外，與可視化設計相關的就是里面的圖表生成器了。不過Kitchen當前只有一些常規的圖表，不過勝在簡潔明了，很適合在此基礎上進行二次設計。該插件還是螞蟻Ant系列的官方插件，可以自動配置符合Ant Design 規范的組件，配合公司采用的Ant系列的框架，會方便不少。
△來源Kitchen插件界面
FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具
這也是一個sketch的插件工具。分為圖標、圖表、組件、模塊和模板五大功能區。
Fusion Design作為一個開源中后臺解決方案，和Ant Design有一定類似，但也有所差別。Ant Design 是一套組件庫, Fusion Design 更像是一個組件庫生成工廠。
直接下載安裝FusionCool的話，打開sketch看到的將是一個默認組件庫，圖表部分的種類樣式比Kitchen多了不少。而更厲害的是，你可以在Fusion Design上基于官方庫編輯改造成屬于你自己的設計系統，發布主題后獲得新的主題包，此時你在FusionCool中就可以看到專屬于你的主題包了，在sketch中完成設計后，開發使用Iceworks安裝你的主題庫就可以直接編碼實現你的設計。
△來源FusionCool插件界面
Map Generator - 快速地圖生成填充
https://github.com/eddiesigner/sketch-map-generator
這是一款基于谷歌地圖的自動填充的Sketch插件，輸入地址后就可以自動生成不同風格樣式的地圖，個人比較喜歡第三款灰色的。
△圖為Map Gnerator生成效果
Amcharts - 矢量地圖定制下載
http://pixelmap.amcharts.com/#
這個網站上面提過，但其實設計師用來獲取矢量地圖也很好用，選擇地圖樣式和地區之后，右下方即可以下載SVG、HTML、Image格式的圖，十分方便。點擊“Generate Ppxel Map”還可以轉化為像素圓點形式的地圖。
如果需要省份的地圖，網站上無法直接下載，但可以要先下載中國svg地圖，然后再打開svg選擇自己需要的省份模塊就可以了。
另外，在使用地圖的時候，要注意正確用圖，規范用圖。要有國家版圖意識，符合測繪法。
標準地圖可以參考國家自然資源局提供的標準地圖服務，服務網址：http://bzdt.ch.mnr.gov.cn/index.html
Chart - 圖表插件
https://github.com/pavelkuligin/chart
這個插件是收費的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。優勢在于可以在Sketch中創建包含隨機、表格或者JSON數據的圖表。圖表樣式也是非常的豐富了。
△來源Chart官網
-END--
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司