項目1 初識數(shù)據(jù)可視化 1
項目描述 1
項目目標 1
任務準備 2
任務1.1 數(shù)據(jù)可視化的定義與發(fā)展歷程 2
1.1.1 數(shù)據(jù)可視化的定義 2
1.1.2 數(shù)據(jù)可視化的發(fā)展歷程 3
任務1.2 數(shù)據(jù)可視化的目的與作用 3
任務1.3 數(shù)據(jù)可視化方法 6
任務1.4 數(shù)據(jù)可視化的行業(yè)應用 9
任務1.5 數(shù)據(jù)可視化常見的技術與工具 13
1.5.1 數(shù)據(jù)可視化開發(fā)語言 13
1.5.2 數(shù)據(jù)可視化開發(fā)工具 14
任務實施 14
任務實施 使用Excel分析2025年第一季度各品類銷售額及增長率 14
任務拓展 16
任務拓展 在Excel中完成各地區(qū)不同產(chǎn)品類別銷售額分析 16
項目2 低代碼工具數(shù)據(jù)可視化 19
項目描述 19
項目目標 20
任務準備 20
任務2.1 報表創(chuàng)建 20
2.1.1 FineReport簡介與安裝 20
2.1.2 新增模板數(shù)據(jù)集 25
2.1.3 創(chuàng)建銷量分組報表 28
2.1.4 創(chuàng)建銷量明細報表 30
2.1.5 創(chuàng)建銷量交叉報表 32
任務2.2 銷售圖表融合 34
2.2.1 訂單表與下拉框組合 34
2.2.2 產(chǎn)品銷量占比——餅圖 38
2.2.3 華北銷售員銷量占比——柱狀圖 41
2.2.4 產(chǎn)品銷量趨勢——折線圖 44
任務2.3 決策報表大屏制作 46
任務實施 47
任務實施 使用FineReport實現(xiàn)銷量報表大屏制作 47
任務拓展 54
任務拓展 使用FineReport實現(xiàn)農(nóng)業(yè)數(shù)據(jù)平臺制作 54
項目3 智慧農(nóng)業(yè)大屏結(jié)構設計 59
項目描述 59
項目目標 60
任務準備 60
任務3.1 功能架構設計 60
3.1.1 功能分解 60
3.1.2 確定數(shù)據(jù)維度 61
任務3.2 大屏布局設計 61
3.2.1 大屏設計原則 61
3.2.2 大屏布局設計 62
3.2.3 大屏修飾技巧 63
任務3.3 前端開發(fā)基礎HTML5+CSS3 63
3.3.1 前端開發(fā)工具介紹 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 設計智慧農(nóng)業(yè)大屏功能模塊 79
任務實施3.2 設計智慧農(nóng)業(yè)大屏的前端布局 80
任務實施3.3 實現(xiàn)智慧農(nóng)業(yè)大屏的前端結(jié)構 81
任務拓展 98
任務拓展 搭建開發(fā)環(huán)境 98
項目4 智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸 102
項目描述 102
項目目標 103
任務準備 103
任務4.1 JavaScript基礎 103
4.1.1 JavaScript簡介 103
4.1.2 JavaScript基礎語法 104
4.1.3 JavaScript函數(shù) 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數(shù)據(jù)結(jié)構 112
4.3.1 JSON介紹 112
4.3.2 JSON數(shù)據(jù)轉(zhuǎn)換方法 112
任務實施 113
任務實施4.1 在智慧農(nóng)業(yè)大屏中顯示智慧農(nóng)業(yè)公司簡介 113
任務實施4.2 在智慧農(nóng)業(yè)大屏中加載技術資源JSON數(shù)據(jù) 118
任務實施4.3 在智慧農(nóng)業(yè)大屏中加載農(nóng)資產(chǎn)品市場價格JSON數(shù)據(jù) 123
任務拓展 125
任務拓展 在智慧農(nóng)業(yè)大屏中加載市場分布JSON數(shù)據(jù) 125
項目5 智慧農(nóng)業(yè)大屏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 直角坐標系網(wǎng)格及坐標軸 143
5.3.2 標題與圖例 145
5.3.3 工具欄 147
5.3.4 主題添加 148
任務實施 149
任務實施5.1 在智慧農(nóng)業(yè)大屏中繪制“經(jīng)濟作物產(chǎn)值”柱狀圖 149
任務實施5.2 在智慧農(nóng)業(yè)大屏中繪制“組織農(nóng)戶技術培訓”折線圖 152
任務實施5.3 在智慧農(nóng)業(yè)大屏中繪制種植面積占比餅圖 155
任務實施5.4 在智慧農(nóng)業(yè)大屏中繪制“費用支出占比”環(huán)形圖 158
任務實施5.5 在智慧農(nóng)業(yè)大屏中繪制“地區(qū)合作單位業(yè)務”地圖 161
任務拓展 164
任務拓展 在智慧農(nóng)業(yè)大屏中繪制“績效目標完成情況”環(huán)形圖組合 164
項目6 基于Vue.js的智慧農(nóng)業(yè)后臺管理系統(tǒng)前端框架搭建 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頁面基本結(jié)構 168
任務6.2 Vue項目開發(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 項目目錄介紹 173
任務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
任務6.4 Vue UI組件庫 177
6.4.1 Element安裝與配置 177
6.4.2 Element組件介紹 178
6.4.3 Element常用組件的應用 178
任務實施 180
任務實施6.1 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中顯示簡介信息表單 180
任務實施6.2 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成技術資源表格 188
任務實施6.3 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成農(nóng)資產(chǎn)品市場價格表格 197
任務拓展 206
任務拓展 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中顯示市場分布表格 206
項目7 Vue.js+Echarts農(nóng)業(yè)數(shù)據(jù)管理圖表數(shù)據(jù)傳輸 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 動態(tài)路由匹配 215
7.2.4 命名路由 215
任務7.3 路由插件Vuex 216
任務實施 217
任務實施7.1 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費用支出”模塊 217
任務實施7.2 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術培訓”模塊 227
任務實施7.3 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊 235
任務拓展 245
任務拓展7.1 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中顯示績效目標完成情況 245
任務拓展7.2 在智慧農(nóng)業(yè)后臺管理系統(tǒng)中顯示經(jīng)濟作物產(chǎn)值 249