在大数据时代，数据可视化已成为数据分析结果的重要呈现方式。本书以开源可视化库ECharts为核心教学工具，以ECharts典型图表绘制为主要教学内容，详细讲解ECharts 5.x的图表类型、基础图表绘制和高级应用，以及相关的交互操作。全书共9个模块，分别是初识数据可视化与ECharts，熟知ECharts的图表结构与基本组件，绘制ECharts柱状图和条形图，绘制ECharts折线图，绘制ECharts饼图，绘制ECharts散点图和气泡图，绘制ECharts高级图表，绘制ECharts特殊图表，以及应用ECharts高级功能。本书构建“示例代码”“引导训练”“实战任务”3个渐进式训练层次，提供49段示例代码、71项引导训练和33项实战任务，同时采用“纸质固定式+电子活页式+工作手册式”的融合型教材形式，旨在帮助读者快速掌握ECharts 5.x的基本使用方法和常见图表的绘制技巧，提升实战技能。

本书可作为高校各专业“Web数据可视化”课程的教材，也可作为相关培训班的辅导资料，以及广大大数据技术爱好者自学数据可视化的参考书。

1．把握新需求，保证了教材的有效性。本教程旨在帮助读者快速掌握ECharts 5.x的基本使用方法和常见图表的绘制技巧。

2. 紧跟新技术，注重了教材的先进性。ECharts作为一款功能强大的开源可视化工具，在Web数据可视化领域具有广泛的应用前景。因其简单易学、功能强大、计算迅速而赢得了广大开发者的青睐。

3. 构建新结构，提升了教材的实用性。这种模块化教材结构以ECharts典型图表绘制为主体，兼顾ECharts 5.x的新特性和新功能。

4. 探索新模式，满足了教材的层次性。本教材遵循学生认知规律和技能成长规律，构建了渐进式的三个训练层次：【示例代码】、【引导训练】、【实战训练】，提供了49段示例代码，72项引导训练任务，33项实战训练任务。

5. 运用新形式，夯实了教材的系统性。为了保证各项内容的完整性和条理性，采用了“纸质固定式+电子活页式+工作手册式”三类型融合型创新形式。

孙道远，男，硕士，副教授，安徽工贸职业技术学院计算机信息工程学院副院长 ，中国科学技术大学国内访问学者，安徽省职业院校技能大赛一等奖指导教师，高级网络工程师，安徽省高等学校教学名师，曾获安徽省教学成果奖二等奖 ，发表论文20余篇 其中SCI论文1篇

目录

模块01　初识数据可视化与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 / 6

1.2.2　ECharts的发展历程 / 6

1.2.3　ECharts的主要功能与技术特点 / 7

1.2.4　ECharts的使用场景 / 9

1.3　认知ECharts支持的图表类型 / 10

1.3.1　ECharts支持的图表按功能进行分类 / 10

1.3.2　ECharts支持的常见图表按数据性质和展示需求进行分类 / 10

1.4　初识ECharts 5.x / 12

1.4.1　什么是ECharts 5.x / 13

1.4.2　ECharts 5.x的新特性与改进 / 13

1.4.3　ECharts 5.x有哪些不足 / 14

1.4.4　ECharts 5.x的升级指南 / 15

1.4.5　ECharts 5.5.0的特性 / 15

1.5　下载与安装ECharts 5.x / 17

1.5.1　下载ECharts 5.x / 17

1.5.2　安装与引入ECharts / 18

1.5.3　将apache-echarts-5.5.1-src.zip发布为echarts.min.js / 18

1.6　ECharts支持的数据格式与数据集 / 19

1.6.1　ECharts支持的数据格式 / 20

1.6.2　ECharts的数据集 / 21

1.7　编辑和嵌入ECharts图表 / 24

1.8　使用ECharts进行数据可视化和数据分析 / 24

1.8.1　使用ECharts进行数据可视化 / 24

1.8.2　使用ECharts进行数据分析 / 28

【实战任务】 / 29

【任务1-1】指出各个图表对应的图表类型和主要功能 / 29

【任务1-2】比较柱状图和条形图 / 31

【任务1-3】比较散点图和折线图 / 33

模块02　熟知ECharts的图表结构与基本组件 / 36

2.1　定义图表容器及指定图表大小 / 36

2.1.1　初始化图表 / 36

2.1.2　图表大小和实例管理 / 37

2.2　认知与使用ECharts的坐标系 / 38

2.2.1　认知直角坐标系 / 38

2.2.2　认知极坐标系 / 40

2.2.3　认知地理坐标系 / 41

2.2.4　认知平行坐标系 / 42

2.2.5　认知单轴 / 42

2.2.6　认知日历坐标系 / 42

2.3　认知ECharts图表组件及常用术语 / 42

2.4　设置ECharts图表的样式 / 49

2.4.1　设置颜色主题 / 49

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　数据集的常用数据格式 / 67

2.5.5　多个数据集的定义及引用 / 68

2.6　使用transform进行数据转换 / 71

2.6.1　数据转换的基础操作 / 72

2.6.2　数据转换的进阶操作 / 74

2.6.3　使用数据转换器filter / 77

2.6.4　使用数据转换器sort / 82

2.6.5　使用外部的数据转换器进行数据转换 / 86

2.7　熟知ECharts的坐标轴 / 89

2.7.1　直角坐标系中的x轴、y轴 / 89

2.7.2　轴线 / 91

2.7.3　刻度 / 91

2.7.4　刻度标签 / 92

2.8　熟知ECharts的图例 / 93

2.8.1　图例的布局位置 / 93

2.8.2　图例的样式 / 94

2.8.3　图例的交互操作 / 95

【实战任务】 / 97

【任务2-1】绘制ECharts柱状图 / 97

【任务2-2】绘制ECharts柱状图并设置属性 / 100

【任务2-3】绘制ECharts柱状图和平滑折线图 / 108

模块03　绘制ECharts柱状图和条形图 / 111

3.1　绘制基础柱状图 / 111

3.1.1　绘制简单的柱状图 / 111

3.1.2　绘制多系列的柱状图 / 113

3.1.3　设置柱状图样式 / 114

3.2　绘制堆叠柱状图 / 119

3.3　绘制瀑布图 / 120

3.4　绘制动态排序柱状图 / 121

3.5　绘制极坐标系下的堆叠柱状图 / 124

3.6　绘制条形图 / 125

3.6.1　绘制基础条形图 / 125

3.6.2　绘制正负条形图 / 127

3.6.3　绘制堆叠条形图 / 129

【实战任务】 / 132

【任务3-1】绘制城市一周气温变化柱状图 / 132

【任务3-2】绘制柱状图对比降水量与蒸发量 / 134

【任务3-3】绘制柱状图统计天气数据 / 136

【任务3-4】绘制柱状图展示蒸发量、降水量和温度之间的关系 / 137

【任务3-5】绘制条形图对比部分省市的地区生产总值 / 141

【任务3-6】绘制动态柱状图与折线图 / 142

模块04　绘制ECharts折线图 / 144

4.1　绘制基础折线图 / 144

4.1.1　绘制简单的折线图 / 144

4.1.2　设置折线图样式 / 146

4.1.3　在折线图的数据点处显示数值 / 147

4.1.4　绘制包含空数据的折线图 / 148

4.2　绘制堆叠折线图 / 149

4.3　绘制区域面积折线图 / 151

4.4　绘制平滑折线图 / 153

4.5　绘制阶梯折线图 / 153

【实战任务】 / 155

【任务4-1】绘制销量折线图分析促销措施对商品销量的影响 / 155

【任务4-2】绘制城市一周气温变化折线图 / 157

【任务4-3】绘制一天用电量分布图 / 158

【任务4-4】绘制长沙市空气质量指数变化折线图，对比分析10月15天的空气质量指数变化 / 158

【任务4-5】绘制函数图形 / 161

模块05　绘制ECharts饼图 / 163

5.1　绘制基础饼图 / 163

5.1.1　绘制简单的饼图 / 163

5.1.2　设置饼图样式 / 164

5.2　绘制圆环图 / 166

5.2.1　绘制基础圆环图 / 166

5.2.2　在圆环图中间显示高亮区域对应的文字 / 168

5.3　绘制南丁格尔玫瑰图 / 169

【实战任务】 / 171

【任务5-1】绘制包含扇区间隙的饼图，分析不同访问途径对广告效果的影响 / 171

【任务5-2】绘制南丁格尔玫瑰图，分析不同访问途径对广告效果的影响 / 173

【任务5-3】绘制嵌套环形图，分析不同访问途径对广告效果的影响 / 175

模块06　绘制ECharts散点图和气泡图 / 176

6.1　绘制散点图 / 176

6.1.1　绘制简单的散点图 / 176

6.1.2　设置散点图的样式 / 177

6.2　绘制气泡图 / 180

【实战任务】 / 181

【任务6-1】绘制男性和女性身高、体重分布图 / 181

【任务6-2】绘制城市AQI气泡图 / 183

模块07　绘制ECharts高级图表 / 184

7.1　绘制K线图 / 184

7.2　绘制雷达图 / 185

7.2.1　绘制基础雷达图 / 185

7.2.2　绘制多雷达图 / 187

7.3　绘制盒须图 / 187

7.4　绘制热力图 / 189

7.5　绘制仪表盘 / 192

【实战任务】 / 193

【任务7-1】绘制城市AQI雷达图 / 193

【任务7-2】绘制某城市一年气温变化盒须图 / 194

【任务7-3】绘制日历热力图 / 196

【任务7-4】绘制速度仪表盘 / 198

【任务7-5】绘制项目完成率仪表盘 / 199

模块08　绘制ECharts特殊图表 / 202

8.1　绘制关系图 / 202

8.2　绘制矩形树图 / 205

8.3　绘制旭日图 / 209

8.4　绘制平行坐标图 / 210

8.5　绘制桑基图 / 211

8.6　绘制漏斗图 / 214

【实战任务】 / 216

【任务8-1】绘制日历关系图 / 216

【任务8-2】绘制标签旋转旭日图 / 217

【任务8-3】绘制AQI分布图（平行坐标图） / 217

模块09　应用ECharts高级功能 / 219

9.1　ECharts的事件与行为 / 219

9.1.1　鼠标事件的处理 / 219

9.1.2　组件交互行为事件的处理 / 221

9.1.3　代码触发ECharts中组件的行为 / 221

9.1.4　监听空白处的事件 / 223

9.2　使用ECharts的富文本标签 / 224

9.2.1　文本样式相关的配置项 / 226

9.2.2　文本、文本框、文本片段的基本样式和装饰 / 227

9.2.3　标签的位置 / 228

9.2.4　文本片段的排版和对齐 / 229

9.3　绘制ECharts图形时实现异步数据的加载与动态更新 / 230

9.3.1　异步加载 / 230

9.3.2　应用loading动画 / 232

9.3.3　动态更新 / 232

9.4　更新数据时配置过渡动画效果 / 235

9.4.1　过渡动画的配置 / 236

9.4.2　动画的性能优化 / 239

9.4.3　监听动画结束 / 239

9.5　服务端渲染ECharts图表 / 240

9.5.1　服务端渲染 / 240

9.5.2　客户端二次渲染 / 243

【实战任务】 / 245

【任务9-1】绘制旋转标签的柱状图 / 245

【任务9-2】绘制包含富文本标签的饼图，分析城市各区域的各类天气状况的分布情况 / 247

【任务9-3】实现ECharts曲线图形的拖曳操作 / 247