ECharts数据可视化实战

第1章 数据可视化 1 任务1.1 认识数据可视化 1 1.1.1 数据可视化的定义及特性 2 1.1.2 数据中蕴含的信息 2 1.1.3 数据可视化的作用 5 1.1.4 数据可视化的流程 7 1.1.5 常用的数据可视化工具 7 任务1.2 ECharts简介 12 1.2.1 ECharts的发展历程及应用 13 1.2.2 ECharts5.x的特性 14 任务1.3 开发工具 17 1.3.1 VS Code 18 1.3.2 VS Code的常用插件 21 小结 23 第2章 ECharts的常用图表 24 任务2.1 ECharts实例 24 2.1.1 准备工作 25 2.1.2 创建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 绘制圆环图 57 2.4.3 绘制嵌套饼图 57 2.4.4 绘制南丁格尔玫瑰图 60 小结 65 实训 65 第3章 ECharts的官方文档及常用组件 67 任务3.1 ECharts的官方文档、基础 架构及常用术语 67 3.1.1 ECharts官方文档简介 68 3.1.2 ECharts基础架构及常用术语 70 任务3.2 直角坐标系下的网格及坐标轴 72 3.2.1 直角坐标系下的网格 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 小结 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 小结 153 实训 153 第5章 ECharts的高级功能 155 任务5.1 ECharts的图表混搭及多 图表联动 155 5.1.1 ECharts的图表混搭 155 5.1.2 ECharts的多图表联动 161 任务5.2 动态切换主题及自定义 ECharts主题 166 5.2.1 动态切换主题 166 5.2.2 自定义ECharts主题 169 任务5.3 ECharts中的事件和行为 170 5.3.1 ECharts中鼠标事件的处理 170 5.3.2 ECharts组件交互的行为事件 176 5.3.3 代码触发ECharts组件的行为 180 任务5.4 异步数据加载与动画加载 185 5.4.1 ECharts中的异步数据加载 185 5.4.2 异步数据加载时的动画加载 189 小结 193 实训 193 第6章 Vue.js项目开发基础 195 任务6.1 初识Vue 195 6.1.1 Vue概述 196 6.1.2 Web前端技术发展概述 196 6.1.3 Web前端的三大主流框架 197 6.1.4 Vue的下载与引入 198 6.1.5 在HTML文件中创建**个 Vue实例 199 6.1.6 Vue实例及其选项 201 任务6.2 Vue的常用指令 204 6.2.1 双大括号标签、v-text与 v-html指令 204 6.2.2 Vue的优化指令 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 传递参数及获取参数 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 小结 249 实训 249 第7章 实战项目 253 任务7.1 创建Vue项目 253 7.1.1 Vue脚手架及单页面应用程序 254 7.1.2 Vue环境安装 254 7.1.3 Vue项目的创建 256 7.1.4 初始Vue项目的目录结构 260 7.1.5 Vue项目加载时文件的 执行顺序 261 任务7.2 项目的设计思路 261 7.2.1 项目概述 262 7.2.2 项目功能结构 265 7.2.3 项目文件夹组织结构 265 7.2.4 Vue单文件组件的组成部分 267 任务7.3 学校数据可视化分析大屏的 设计与实现 268 7.3.1 学校数据可视化分析 大屏的设计 268 7.3.2 学校数据可视化分析 大屏的实现 270 任务7.4 登录页的设计与实现 275 7.4.1 利用Element-UI设计静态 登录页 276 7.4.2 登录页面功能的实现 282 任务7.5 学校大屏中的折线图、 饼图和雷达图 286 7.5.1 在学校大屏中绘制折线图 286 7.5.2 在学校大屏中绘制饼图 289 7.5.3 在学校大屏中绘制雷达图 292 小结 294 实训 294 参考文献 296