本书遵循“技术实践引领、工作过程导向、项目驱动教学”的设计理念，引导读者从基础知识到难点内容，逐步掌握数据可视化的全过程。以实际项目为载体串连知识与技能，介绍基于低代码的数据可视化工具、Web前端框架技术和ECharts可视化技术，实现数据可视化大屏及数据管理平台，培养读者数据可视化的能力。本书的主要内容有数据可视化初识、低代码工具数据可视化、智慧农业大屏结构设计、智慧农业大屏数据传输、智慧农业大屏ECharts图表插入、基于Vue.js的智慧农业后台管理系统前端框架搭建、Vue.js+ECharts农业数据管理图表数据传输。在项目实现过程中，详细阐述了可视化低代码工具的使用方法，以及ECharts图表、Web前端基础、Vue.js前端框架等知识。

邵佳靓，1996年生，女，讲师、高级工程师，浙江安防职业技术学院人工智能学院大数据技术专业专任教师，研究领域为大数据技术与应用及计算机相关专业课程思政教学，主要承担大数据、信息技术教学工作。曾主持、参与省级课题2项、主持市厅级课题4项、校级课题2项；获计算机软件著作权4项；主编教材1本；曾获全国数字创意教学技能大赛二等奖、浙江省高校课程思政优秀教学案例、教学微课二等奖、市级教学能力比赛三等奖、校级十佳说课、微课一等奖等教学奖项；多次获校级优秀共产党员、评估先进工作者等荣誉称号。主讲《大数据可视化技术》、《Web前端开发》、《大学信息技术基础》等课程。

项目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