大數據可視化項目實戰教程（ECharts +Vue.js）（微課版）

項目1 初識數據可視化 1
項目描述 1
項目目標 1
任務準備 2
任務1.1 數據可視化的定義與發展歷程 2
1.1.1 數據可視化的定義 2
1.1.2 數據可視化的發展歷程 3
任務1.2 數據可視化的目的與作用 3
任務1.3 數據可視化方法 6
任務1.4 數據可視化的行業應用 9
任務1.5 數據可視化常見的技術與工具 13
1.5.1 數據可視化開發語言 13
1.5.2 數據可視化開發工具 14
任務實施 14
任務實施 使用Excel分析2025年第一季度各品類銷售額及增長率 14
任務拓展 16
任務拓展 在Excel中完成各地區不同產品類別銷售額分析 16
項目2 低代碼工具數據可視化 19
項目描述 19
項目目標 20
任務準備 20
任務2.1 報表創建 20
2.1.1 FineReport簡介與安裝 20
2.1.2 新增模板數據集 25
2.1.3 創建銷量分組報表 28
2.1.4 創建銷量明細報表 30
2.1.5 創建銷量交叉報表 32
任務2.2 銷售圖表融合 34
2.2.1 訂單表與下拉框組合 34
2.2.2 產品銷量占比——餅圖 38
2.2.3 華北銷售員銷量占比——柱狀圖 41
2.2.4 產品銷量趨勢——折線圖 44
任務2.3 決策報表大屏製作 46
任務實施 47
任務實施 使用FineReport實現銷量報表大屏製作 47
任務拓展 54
任務拓展 使用FineReport實現農業數據平臺製作 54
項目3 智慧農業大屏結構設計 59
項目描述 59
項目目標 60
任務準備 60
任務3.1 功能架構設計 60
3.1.1 功能分解 60
3.1.2 確定數據維度 61
任務3.2 大屏佈局設計 61
3.2.1 大屏設計原則 61
3.2.2 大屏佈局設計 62
3.2.3 大屏修飾技巧 63
任務3.3 前端開發基礎HTML5+CSS3 63
3.3.1 前端開發工具介紹 63
3.3.2 HTML介紹 64
3.3.3 HTML常見標簽 65
3.3.4 CSS基礎 68
3.3.5 CSS選擇器 72
3.3.6 盒子模型 75
3.3.7 元素的浮動與定位 75
任務實施 79
任務實施3.1 設計智慧農業大屏功能模塊 79
任務實施3.2 設計智慧農業大屏的前端佈局 80
任務實施3.3 實現智慧農業大屏的前端結構 81
任務拓展 98
任務拓展 搭建開發環境 98
項目4 智慧農業大屏數據傳輸 102
項目描述 102
項目目標 103
任務準備 103
任務4.1 JavaScript基礎 103
4.1.1 JavaScript簡介 103
4.1.2 JavaScript基礎語法 104
4.1.3 JavaScript函數 105
4.1.4 文檔對象模型 106
任務4.2 jQuery 107
4.2.1 jQuery基礎語法 107
4.2.2 jQuery選擇器 107
4.2.3 使用jQuery操作DOM 109
4.2.4 AJAX在jQuery中的應用 109
任務4.3 JSON數據結構 112
4.3.1 JSON介紹 112
4.3.2 JSON數據轉換方法 112
任務實施 113
任務實施4.1 在智慧農業大屏中顯示智慧農業公司簡介 113
任務實施4.2 在智慧農業大屏中加載技術資源JSON數據 118
任務實施4.3 在智慧農業大屏中加載農資產品市場價格JSON數據 123
任務拓展 125
任務拓展 在智慧農業大屏中加載市場分佈JSON數據 125
項目5 智慧農業大屏ECharts圖表插入 128
項目描述 128
項目目標 129
任務準備 129
任務5.1 ECharts操作基礎流程 129
5.1.1 第一個ECharts實例 129
5.1.2 基礎配置介紹 131
任務5.2 ECharts常用圖表 131
5.2.1 繪制柱狀圖 131
5.2.2 繪制折線圖 133
5.2.3 繪制餅圖 137
5.2.4 繪制散點圖 139
5.2.5 繪制儀表盤 141
5.2.6 繪制雷達圖 142
任務5.3 ECharts圖表配置項 143
5.3.1 直角坐標系網格及坐標軸 143
5.3.2 標題與圖例 145
5.3.3 工具欄 147
5.3.4 主題添加 148
任務實施 149
任務實施5.1 在智慧農業大屏中繪制“經濟作物產值”柱狀圖 149
任務實施5.2 在智慧農業大屏中繪制“組織農戶技術培訓”折線圖 152
任務實施5.3 在智慧農業大屏中繪制種植面積占比餅圖 155
任務實施5.4 在智慧農業大屏中繪制“費用支出占比”環形圖 158
任務實施5.5 在智慧農業大屏中繪制“地區合作單位業務”地圖 161
任務拓展 164
任務拓展 在智慧農業大屏中繪制“績效目標完成情況”環形圖組合 164
項目6 基於Vue.js的智慧農業後台管理系統前端框架搭建 166
項目描述 166
項目目標 167
任務準備 167
任務6.1 Vue.js前端框架概述 167
6.1.1 Vue.js簡介 167
6.1.2 Vue.js引入方式 168
6.1.3 Vue頁面基本結構 168
任務6.2 Vue項目開發環境與輔助工具 169
6.2.1 Node.js部署 169
6.2.2 Node包管理器 170
6.2.3 Node.js環境配置 171
6.2.4 項目目錄介紹 173
任務6.3 Vue內置指令與語法 174
6.3.1 插值綁定 174
6.3.2 屬性綁定 175
6.3.3 雙向綁定 175
6.3.4 條件渲染 176
6.3.5 列表渲染 176
任務6.4 Vue UI組件庫 177
6.4.1 Element安裝與配置 177
6.4.2 Element組件介紹 178
6.4.3 Element常用組件的應用 178
任務實施 180
任務實施6.1 在智慧農業後台管理系統中顯示簡介信息表單 180
任務實施6.2 在智慧農業後台管理系統中完成技術資源表格 188
任務實施6.3 在智慧農業後台管理系統中完成農資產品市場價格表格 197
任務拓展 206
任務拓展 在智慧農業後台管理系統中顯示市場分佈表格 206
項目7 Vue.js+Echarts農業數據管理圖表數據傳輸 209
項目描述 209
項目目標 209
任務準備 210
任務7.1 AJAX與Axios 210
7.1.1 認識Axios 210
7.1.2 Axios的基礎用法 210
任務7.2 前端路由Vue Router 211
7.2.1 Vue Router的基本用法 212
7.2.2 嵌套路由 214
7.2.3 動態路由匹配 215
7.2.4 命名路由 215
任務7.3 路由插件Vuex 216
任務實施 217
任務實施7.1 在智慧農業後台管理系統中完成“費用支出”模塊 217
任務實施7.2 在智慧農業後台管理系統中完成“技術培訓”模塊 227
任務實施7.3 在智慧農業後台管理系統中完成“合作單位”模塊 235
任務拓展 245
任務拓展7.1 在智慧農業後台管理系統中顯示績效目標完成情況 245
任務拓展7.2 在智慧農業後台管理系統中顯示經濟作物產值 249