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