可視化技術與 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?打造酷炫的可視化數據大屛》，點擊鏈接即可免費學習課程前兩章！

總結

以上是生活随笔為你收集整理的Vue.js 打造酷炫的可视化数据大屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。