第1章 數(shù)據(jù)可視化 1 任務1.1 認識數(shù)據(jù)可視化 1 1.1.1 數(shù)據(jù)可視化的定義及特性 2 1.1.2 數(shù)據(jù)中蘊含的信息 2 1.1.3 數(shù)據(jù)可視化的作用 5 1.1.4 數(shù)據(jù)可視化的流程 7 1.1.5 常用的數(shù)據(jù)可視化工具 7 任務1.2 ECharts簡介 12 1.2.1 ECharts的發(fā)展歷程及應用 13 1.2.2 ECharts5.x的特性 14 任務1.3 開發(fā)工具 17 1.3.1 VS Code 18 1.3.2 VS Code的常用插件 21 小結(jié) 23 第2章 ECharts的常用圖表 24 任務2.1 ECharts實例 24 2.1.1 準備工作 25 2.1.2 創(chuàng)建ECharts圖表 28 任務2.2 柱狀圖 32 2.2.1 繪制標準柱狀圖 32 2.2.2 繪制堆積柱狀圖 37 2.2.3 繪制標準條形圖 41 2.2.4 繪制瀑布圖 43 任務2.3 折線圖 46 2.3.1 繪制標準折線圖 46 2.3.2 繪制堆積折線圖和堆積面積圖 48 2.3.3 繪制階梯圖 51 任務2.4 餅圖 54 2.4.1 繪制標準餅圖 54 2.4.2 繪制圓環(huán)圖 57 2.4.3 繪制嵌套餅圖 57 2.4.4 繪制南丁格爾玫瑰圖 60 小結(jié) 65 實訓 65 第3章 ECharts的官方文檔及常用組件 67 任務3.1 ECharts的官方文檔、基礎 架構(gòu)及常用術語 67 3.1.1 ECharts官方文檔簡介 68 3.1.2 ECharts基礎架構(gòu)及常用術語 70 任務3.2 直角坐標系下的網(wǎng)格及坐標軸 72 3.2.1 直角坐標系下的網(wǎng)格 73 3.2.2 直角坐標系下的坐標軸 76 任務3.3 標題組件與圖例組件 81 3.3.1 標題組件 82 3.3.2 圖例組件 88 任務3.4 工具箱組件與詳情提示框組件 93 3.4.1 工具箱組件 94 3.4.2 詳情提示框組件 98 任務3.5 標記點和標記線 103 3.5.1 標記點 103 3.5.2 標記線 103 小結(jié) 106 實訓 107 第4章 ECharts中的其他圖表 108 任務4.1 散點圖、氣泡圖 108 4.1.1 繪制散點圖 109 4.1.2 繪制氣泡圖 114 任務4.2 儀表盤 122 4.2.1 繪制單儀表盤 123 4.2.2 繪制多儀表盤 127 任務4.3 漏斗圖或金字塔 131 4.3.1 繪制標準漏斗圖或金字塔 132 4.3.2 繪制多漏斗圖或多金字塔 135 任務4.4 雷達圖和詞云圖 137 4.4.1 繪制雷達圖 137 4.4.2 繪制詞云圖 145 4.4.3 繪制矩形樹圖 149 小結(jié) 153 實訓 153 第5章 ECharts的高級功能 155 任務5.1 ECharts的圖表混搭及多 圖表聯(lián)動 155 5.1.1 ECharts的圖表混搭 155 5.1.2 ECharts的多圖表聯(lián)動 161 任務5.2 動態(tài)切換主題及自定義 ECharts主題 166 5.2.1 動態(tài)切換主題 166 5.2.2 自定義ECharts主題 169 任務5.3 ECharts中的事件和行為 170 5.3.1 ECharts中鼠標事件的處理 170 5.3.2 ECharts組件交互的行為事件 176 5.3.3 代碼觸發(fā)ECharts組件的行為 180 任務5.4 異步數(shù)據(jù)加載與動畫加載 185 5.4.1 ECharts中的異步數(shù)據(jù)加載 185 5.4.2 異步數(shù)據(jù)加載時的動畫加載 189 小結(jié) 193 實訓 193 第6章 Vue.js項目開發(fā)基礎 195 任務6.1 初識Vue 195 6.1.1 Vue概述 196 6.1.2 Web前端技術發(fā)展概述 196 6.1.3 Web前端的三大主流框架 197 6.1.4 Vue的下載與引入 198 6.1.5 在HTML文件中創(chuàng)建**個 Vue實例 199 6.1.6 Vue實例及其選項 201 任務6.2 Vue的常用指令 204 6.2.1 雙大括號標簽、v-text與 v-html指令 204 6.2.2 Vue的優(yōu)化指令 207 6.2.3 v-if、v-else、v-else-if指令 207 6.2.4 v-show指令 212 6.2.5 v-bind指令 213 6.2.6 v-for指令 214 6.2.7 v-on指令 217 6.2.8 v-model指令 221 任務6.3 Vue的生命周期 229 任務6.4 Vue 的路由 232 6.4.1 路由的安裝和基本使用 233 6.4.2 嵌套路由 236 6.4.3 傳遞參數(shù)及獲取參數(shù) 239 6.4.4 路由重定向 241 6.4.5 編程式導航 242 任務6.5 Axios組件 244 6.5.1 Axios的基本介紹 244 6.5.2 Axios的安裝及引入 244 6.5.3 get請求 245 6.5.4 post請求 248 小結(jié) 249 實訓 249 第7章 實戰(zhàn)項目 253 任務7.1 創(chuàng)建Vue項目 253 7.1.1 Vue腳手架及單頁面應用程序 254 7.1.2 Vue環(huán)境安裝 254 7.1.3 Vue項目的創(chuàng)建 256 7.1.4 初始Vue項目的目錄結(jié)構(gòu) 260 7.1.5 Vue項目加載時文件的 執(zhí)行順序 261 任務7.2 項目的設計思路 261 7.2.1 項目概述 262 7.2.2 項目功能結(jié)構(gòu) 265 7.2.3 項目文件夾組織結(jié)構(gòu) 265 7.2.4 Vue單文件組件的組成部分 267 任務7.3 學校數(shù)據(jù)可視化分析大屏的 設計與實現(xiàn) 268 7.3.1 學校數(shù)據(jù)可視化分析 大屏的設計 268 7.3.2 學校數(shù)據(jù)可視化分析 大屏的實現(xiàn) 270 任務7.4 登錄頁的設計與實現(xiàn) 275 7.4.1 利用Element-UI設計靜態(tài) 登錄頁 276 7.4.2 登錄頁面功能的實現(xiàn) 282 任務7.5 學校大屏中的折線圖、 餅圖和雷達圖 286 7.5.1 在學校大屏中繪制折線圖 286 7.5.2 在學校大屏中繪制餅圖 289 7.5.3 在學校大屏中繪制雷達圖 292 小結(jié) 294 實訓 294 參考文獻 296