https://www.cnblogs.com/shiyanlou/p/13938446.html
https://blog.csdn.net/m0_38044941/article/details/92800614
可視化技術與 Vue 介紹
實驗介紹
在本節實驗中，將對可視化技術的應用場景、發展歷程進行介紹，讓大家對可視化技術有一個基礎的概念。隨后將介紹如今流行的可視化框架與其之間的優缺點對比。最后介紹 Vue 與其腳手架的概念知識，也是本課程后期項目實戰的核心技術點之一。
知識點
- 可視化技術發展與應用
- 可視化技術框架
- Vue 技術
- Vue-cli 腳手架
什么是可視化
“數據可視化” 是一門數據與視覺相結合的技術，簡單理解就是將數據轉換成易於用戶辨識和理解的視覺表現形式。通過圖表展現方式，讓數據轉換為視覺圖像，如各種 2D 圖表、3D 圖表、地理地圖、關系數據圖等等，以此來更好的展現數據的價值。
可視化應用場景
在此我們舉幾個十分常見的可視化簡單應用，來加深大家的印象。
-
Excel
-
百度腦圖
-
項目數據展示（vue-admin-beautiful）
-
數據大屏
可視化技術的框架與優缺點
可視化技術框架介紹
可視化技術運用廣泛，但是實現起來難度較大，使用原生寫法門檻較高，於是在技術社區的氛圍之下也誕生出了非常多優秀的開源框架，這里也列舉了一些經典框架並相應地介紹它們的優缺點：
| 框架 | 說明 |
|---|---|
| Echart.js | 國內最火的圖表庫之一，由百度技術團隊出品，內容豐富社區活躍，Echarts3 對性能進行了很好的提升和改進。 |
| AntV | 螞蟻可視化技術，類別豐富，擁有 G2、G6、F2、L7 等專業圖標庫，對圖形的控制上要更自由，更抽象通用。 |
| Highcharts | 內容豐富，支持 IE6 +、iPhone/iPad、Android 等目前市面上所有主流的瀏覽器，即開創性的支持 IE6 瀏覽器。 |
| D3.js | D3 是最流行的可視化庫之一，它被很多其他的表格插件所使用。功能拆得非常細，適合拿來學習的可視化算法。 |
| Chart.js | 一個簡單、面向對象、為設計者和開發者准備的圖表繪制工具庫。 |
可視化技術的優缺點
優點
優秀的可視化圖形可以幫助人們快速、輕松地理解數據之間的聯系，其顯著的特點是能夠讓用戶通過快速地吸收圖形特征，從而理解信息內容，達到高效率提升數據分析的目的。
可視化技術在很大程度上減輕了用戶對於數據表的理解壓力，無需讓用戶埋頭於大量令人眼花繚亂的數據中。可視化技術也廣泛地應用在大屏展示相關場合，通過本身自帶的良好視覺效果屬性極大的提升了推廣效率。
缺點
可視化技術的原生數據交互能力擁有極大的局限性，並且展示效果也會受到圖像風格的限制。由於本身的特性導致其能展示的報表級別不會太高，無法進行更進一步的展示。如果不能合理的將業務數據與圖表形式進行結合，則效果可能會不盡如人意，違背了初衷。
Vue 介紹
Vue 技術
Vue 是一套用於構建用戶界面、實現 MVVM 開發方式的漸進式框架。根據官網的介紹說明，可以看出與其它傳統 JQuery、Bootstrap 等大型框架不同的是，Vue 的核心在於只關注視圖層的同時，避免了直接操作 Dom 元素，讓開發者更好地處理數據直接的聯系，並且能夠為復雜的單頁應用提供驅動。
通常在項目的應用中開發者更多的是對 Vue 與其技術體系插件進行使用，包括但不限於：Vue-router、VueX、Vue-cli、Axios、Element-ui 等。
與 Vue 對應的還有大家熟悉的 React 和 Angular 框架，相比於 Vue 來說，Angular 和 React 的學習成本都很高，對新人不太友好，並且中國使用 Vue 的公司是占大多數，所以為了讓大家更快地上手和在實際中進行應用，本課程選擇使用 Vue 技術進行本課程開發實現。
Vue-cli 腳手架
Vue-cli 是一個基於 Vue.js 進行快速開發的完整系統，也稱之為 Vue 腳手架。它只需通過便捷 npm/yarn 進行安裝即可，通過幾行簡單的命令，就能夠幫助開發者搭建一個完整的項目框架，節省大量前期開發配置時間。更多詳細介紹說明可以在 官網 進行查看。
官方說明它具備以下幾點主要特征：
- 可升級、基於 Webpack 構建，並帶有合理的默認配置。
- 可以通過項目內的配置文件進行配置。
- 可以通過插件進行擴展。
- 一個豐富的官方插件集合，集成了前端生態中最好的工具。
- 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。
Vue-cli 還具備界面 UI 工具，開發者可以用來創建和管理項目，簡化了編寫命令行的步驟。開發者可以在瀏覽器中配置或運行 Vue 項目相關的所有任務，包括依賴項、插件、命令等。項目的可視化演示使此工具，能夠讓開發者直觀快速的進行使用，而在本教學課程中，項目和初始練習項目的環境也都是選擇了腳手架來進行搭建。
實驗總結
在本節實驗中，我們學習了可視化技術的發展歷程，可視化框架的介紹與對比，讓大家對可視化技術有了基礎的概念，介紹 Vue 與 Vue-cli 的知識與相關應用。
以上內容來自實驗樓新課《Vue.js 打造酷炫的可視化數據大屛》，點擊鏈接即可免費學習課程前兩章！