模块1 初识数据可视化与ECharts 1
1.1 认知数据可视化 1
1.1.1 数据可视化的定义 1
1.1.2 数据可视化的作用 1
1.1.3 数据可视化的特性 2
1.1.4 数据可视化的基本流程 3
1.1.5 常用的数据可视化工具 4
1.2 认知ECharts 5
1.2.1 什么是ECharts 5
1.2.2 ECharts的发展历程 5
1.2.3 ECharts 的主要功能与技术特点 6
1.2.4 ECharts的使用场景 8
1.3 认知ECharts支持的图表类型 9
1.3.1 ECharts支持的图表按功能进行分类 9
1.3.2 ECharts支持的常见图表按数据性质和展示需求进行分类 9
1.4 初识ECharts 5.x 11
1.4.1 什么ECharts 5.x 11
1.4.2 ECharts 5.x的新特性与改进 12
1.4.3 ECharts 5.x有哪些不足 13
1.4.4 ECharts 5.x的升级指南 14
1.4.5 Apache ECharts 5.5.0 的特性 14
1.5 下载与安装ECharts 5.x 16
1.5.1 下载ECharts 5.x 16
1.5.2 安装与引入ECharts 16
1.5.3 将apache-echarts-5.5.1-src.zip发布为echarts.min.js 17
1.6 ECharts支持的数据格式与数据集 18
1.6.1 ECharts支持的数据格式 18
1.6.2 ECharts支持的数据集 20
1.6.3 ECharts支持的数据集组件 22
1.7 选用编辑和嵌入ECharts图表的工具 24
1.8 使用 ECharts 进行数据分析 24
1.8.1 ECharts的使用步骤 25
1.8.2 使用 ECharts进行数据分析 28
【实战训练】 29
【任务1-1】指出各个图表对应ECharts的图表类型和主要功能 29
【任务1-2】比较柱状图和条形图的区别 31
【任务1-3】比较散点图和折线图 33
模块2 熟知ECharts的图表结构与基本组件 36
2.1 定义图表容器及指定图表大小 36
2.1.1 初始化图表 36
2.1.2 响应容器大小的变化 36
2.2 认知与使用ECharts的坐标系 38
2.2.1 认知直角坐标系（Grid） 38
2.2.2 认知极坐标系（Polar） 40
2.2.3 认知地理坐标系（Geo） 41
2.2.4 认知平行坐标系 41
2.2.5 认知单轴（SingleAxis） 41
2.2.6 认知日历（Calendar） 42
2.3 认知ECharts图表组件及常用术语 42
2.4 ECharts 中设置样式 50
2.4.1 设置颜色主题（Theme） 50
2.4.2 设置调色盘 50
2.4.3 直接设置图形元素的样式 51
2.4.4 通过 emphasis 属性定制高亮的样式 51
2.4.5 数据的视觉映射 53
2.5 使用数据集管理数据 55
2.5.1 在系列中设置数据 55
2.5.2 在数据集中设置数据 57
2.5.3 数据到图形的映射 59
2.5.4 数据的各种描述格式 66
2.5.5 多个 dataset 以及如何引用他们 67
2.6 使用 transform 进行数据转换 70
2.6.1 数据转换基础使用 70
2.6.2 数据转换的进阶使用 73
2.6.3 使用数据转换器 "filter" 75
2.6.4 使用数据转换器 "sort" 80
2.6.5 使用外部的数据转换器进行数据转换 83
2.7 熟知ECharts的坐标轴 86
2.7.1 直角坐标系中x 轴、y 轴 86
2.7.2 轴线 88
2.7.3 刻度 89
2.7.4 刻度标签 89
2.8 熟知ECharts的图例 90
2.8.1 图例的布局位置 90
2.8.2 图例的样式 91
2.8.3 图例的交互操作 92
【实战训练】 93
【任务2-1】绘制ECharts柱状图 93
【任务2-2】绘制ECharts柱状图并设置多样的属性 96
【任务2-3】绘制ECharts柱状图和平滑折线图 104
模块3 绘制ECharts柱状图 107
3.1 绘制基础柱状图 107
3.1.1 绘制简单的柱状图 107
3.1.2 绘制多系列的柱状图 108
3.1.3 设置柱状图样式 109
3.2 绘制堆叠柱状图 114
3.3 绘制阶梯瀑布图 115
3.4 绘制动态数据柱状图 116
3.5 绘制极坐标系下的堆叠柱状图 118
3.6 绘制条形图 120
3.6.1 绘制基础条形图 120
3.6.2 绘制正负条形图 121
3.6.3 绘制堆叠条形图 123
【实战训练】 126
【任务3-1】网页文件task0301.html中绘制城市一周气温变化柱状图 126
【任务3-2】网页文件task0302.html中绘制柱状图对比降雨量与比蒸发量 127
【任务3-3】网页文件task0303.html中绘制柱状图统计天气数据 129
【任务3-4】网页文件task0304.html中绘制柱状图分析“蒸发量”“降水量”和“温度”之间的关系 130
【任务3-5】网页文件task0305.html中绘制条形图对比部分省市的地区生产总值 133
【任务3-6】网页文件task0306.html中绘制动态柱状图与折线图 135
模块4 绘制ECharts折线图 136
4.1 绘制基础折线图 136
4.1.1 绘制简单的折线图 136
4.1.2 设置折线图样式 138
4.1.3 在折线图的数据点处显示数值 139
4.1.4 绘制包括空数据的折线图 140
4.2 绘制堆叠折线图 140
4.3 绘制区域面积折线图 142
4.4 绘制平滑曲线图 143
4.5 绘制阶梯折线图 144
【实战训练】 145
【任务4-1】 网页文件task0401.html中绘制销量折线图分析促销措施对商品销量的影响 145
【任务4-2】 网页文件task0402.html中绘制城市一周气温变化的折线图 148
【任务4-3】 网页文件task0403.html中绘制一天用电量分布图 148
【任务4-4】 网页文件task0404.html中绘制长沙市空气质量指数变化折线图对比分析10月份15天的空气质量指数变化 149
【任务4-5】 网页task0405.html中绘制函数图形 152
模块5 绘制ECharts饼图 153
5.1 绘制基础饼图 153
5.1.1 绘制简单的饼图 153
5.1.2 设置饼图样式 154
5.2 绘制圆环图 155
5.2.1 绘制基础圆环图 155
5.2.2 在圆环图中间显示高亮扇形对应的文字 157
5.3 绘制南丁格尔图（玫瑰图） 158
【实战训练】 159
【任务5-1】 网页文件task0501.html中绘制包含扇区间隙的饼图并分析不同访问途径对广告效果的影响度 160
【任务5-2】 网页文件task0502.html中绘制南丁格尔图并分析不同访问途径对广告效果的影响度 161
【任务5-3】 网页文件task0503.html中绘制嵌套环形图并分析不同访问途径对广告效果的影响度 163
模块6 绘制ECharts散点图和气泡图 164
6.1 绘制散点图 164
6.1.1 绘制简单的散点图 164
6.1.2 设置散点图的样式 165
6.2 绘制气泡图 167
【自主训练】 168
【任务6-1】 网页文件task0601.html中绘制男性女性身高体重分布图 168
【任务6-2】 网页文件task0602.html中绘制城市AQI气泡图 170
模块7 绘制ECharts高级图表 172
7.1 绘制K线图 172
7.2 绘制雷达图 173
7.2.1 绘制基础雷达图 173
7.2.2 绘制多雷达图 174
7.3 绘制盒须图 175
7.4 绘制热力图 176
7.5 绘制仪表盘 179
【自主训练】 180
【任务7-1】网页文件task0701.html中绘制城市AQI-雷达图 180
【任务7-2】网页文件task0702.html中绘制某城市一年气温变化盒须图 181
【任务7-3】网页文件task0703.html中绘制日历热力图 183
【任务7-4】网页文件task0704.html中绘制速度仪表盘 184
【任务7-5】网页文件task0705.html中绘制项目完成率仪表盘 186
模块8 绘制ECharts的其他特殊图表 188
8.1 绘制关系图 188
8.2 绘制ECharts矩形树图 190
8.3 绘制旭日图 194
8.4 绘制平行坐标 195
8.5 绘制桑基图 196
8.6 绘制漏斗图 198
【实战训练】 200
【任务8-1】网页文件task0801.html中绘制日历关系图 200
【任务8-2】网页文件task0802.html中绘制标签旋转旭日图 201
【任务8-3】网页文件test0803.html中绘制AQI分布（平行坐标）图 202
模块9 应用ECharts的高级功能 204
9.1 ECharts的事件与行为 204
9.1.1 鼠标事件的处理 204
9.1.2 组件交互行为事件的处理 206
9.1.3 代码触发 ECharts 中组件的行为 206
9.1.4 监听“空白处”的事件 208
9.2 使用ECharts的富文本标签 209
9.2.1 文本样式相关的配置项 211
9.2.2 文本、文本框、文本片段的基本样式和装饰 211
9.2.3 标签的位置 212
9.2.4 文本片段的排版和对齐 213
9.3 绘制ECharts图形时实现异步数据的加载与动态更新 214
9.3.1 异步加载 214
9.3.2 应用loading 动画 216
9.3.3 数据的动态更新 216
9.4 更新数据时配置过渡动画效果 218
9.4.1 过渡动画的配置 219
9.4.2 动画的性能优化 222
9.4.3 监听动画结束 222
9.5 服务端渲染 ECharts 图表 223
9.5.1 服务端渲染 223
9.5.2 客户端二次渲染 225
【实战训练】 227
【任务9-1】网页文件task0901.html中绘制旋转标签的柱状图 227
【任务9-2】网页文件task0902.html中绘制包含富文本标签的饼图，分析城市各区域的各类天气状况的分布情况 229
【任务9-3】网页文件task0903.html中实现ECharts曲线图形的拖拽操作 230