數據可視化任務式教程

目錄
項目 1 數據可視化開發環境搭建 ·········································································.1
任務 1.1 搭建開發環境 ················································································.2
1.1.1 Node.js 概述 ················································································.3
1.1.2 VS Code 概述 ··············································································.6
任務 1.2 創建 Vue 項目 ··············································································.16
任務 1.3 引入 ECharts 到 Vue 項目 ································································.29
1.3.1 ECharts 簡介 ···············································································.30
1.3.2 ECharts 架構 ···············································································.31
1.3.3 AI 工具簡介 ···············································································.33
項目 2 使用基礎圖表繪制訂單數據 ·····································································.39
任務 2.1 柱狀圖統計年度銷量 ······································································.39
2.1.1 柱狀圖的定義與特點 ····································································.41
2.1.2 柱狀圖的組成元素 ·······································································.43
2.1.3 柱狀圖的配置項 ··········································································.45
2.1.4 數據綁定與響應式編程 ·································································.49
任務 2.2 折線圖繪制銷量動圖 ······································································.63
2.2.1 Vue 組件結構 ··············································································.65
2.2.2 Vue 組件綁定 ·············································································.67
2.2.3 Vue 組件生命周期 ········································································.68
2.2.4 折線圖線條樣式配置 ····································································.70
2.2.5 折線圖數據點標記配置 ·································································.72
任務 2.3 餅圖統計產品類別 ·········································································.82
2.3.1 餅圖組件 ···················································································.83
2.3.2 餅圖的扇形數據、顏色和標簽配置 ··················································.84
2.3.3 餅圖動畫屬性 ·············································································.86
2.3.4 餅圖交互屬性 ·············································································.87
項目 3 多圖表組合布局 ····················································································.98
任務 3.1 水平布局多個圖表 ·········································································.99
3.1.1 核心概念與原理 ········································································.100
3.1.2 核心技術與實現 ········································································.106
任務 3.2 垂直布局多個圖表 ·······································································.123
3.2.1 核心概念與原理 ········································································.124
3.2.2 核心技術與實現 ········································································.127
任務 3.3 實現混合布局 ·············································································.137
3.3.1 核心概念與原理 ········································································.139
3.3.2 核心技術與實現 ········································································.142
項目 4 數據動態獲取與更新 ············································································.161
任務 4.1 從本地 JSON 文件獲取數據 ···························································.162
4.1.1 JSON 基礎 ···············································································.163
4.1.2 Axios 工具應用 ·········································································.166
任務 4.2 從後端接口獲取數據 ····································································.181
4.2.1 Mock.js 基礎 ·············································································.183
4.2.2 接口配置 ·················································································.186
4.2.3 異常處理機制 ···········································································.192
任務 4.3 數據實時更新與圖表刷新 ······························································.204
4.3.1 JavaScript 定時器 ······································································.205
4.3.2 數據獲取流程 ···········································································.207
4.3.3 事件機制與圖表刷新 ··································································.214
項目 5 配置圖表中的客戶信息 ·········································································.228
任務 5.1 自定義主題與樣式 ·······································································.229
5.1.1 ECharts 主題機制 ·······································································.230
5.1.2 圖表樣式配置 ···········································································.232
任務 5.2 添加圖表標註與輔助線 ·································································.241
5.2.1 圖表標註的核心概念與類型 ·························································.242
5.2.2 輔助線的核心概念與類型 ····························································.243
5.2.3 標註與輔助線的配置屬性 ····························································.244
5.2.4 電商場景標註與輔助線的設計原則 ················································.245
任務 5.3 圖表鉆取與聯動 ··········································································.255
5.3.1 圖表鉆取的核心概念與類型 ·························································.256
5.3.2 圖表聯動的核心概念與類型 ·························································.257
5.3.3 鉆取與聯動的技術實現原理 ·························································.259
5.3.4 電商場景鉆取與聯動的設計原則 ···················································.261
項目 6 電商系統可視化設計與實現 ···································································.274
任務 6.1 完成電商項目的可視化設計 ···························································.274
6.1.1 前端項目生命周期 ·····································································.275
6.1.2 項目開發流程 ···········································································.277
任務 6.2 通過 API 加載數據及性能優化 ·······················································.305
任務 6.3 項目打包與部署 ··········································································.315
6.3.1 Vite 生產構建優化 ·····································································.316
6.3.2 Nginx 服務器簡介 ······································································.317