目錄

模塊01　初識(shí)數(shù)據(jù)可視化與ECharts / 1

1.1　認(rèn)知數(shù)據(jù)可視化 / 1

1.1.1　數(shù)據(jù)可視化的定義 / 1

1.1.2　數(shù)據(jù)可視化的作用 / 1

1.1.3　數(shù)據(jù)可視化的特性 / 2

1.1.4　數(shù)據(jù)可視化的基本流程 / 3

1.1.5　常用的數(shù)據(jù)可視化工具 / 4

1.2　認(rèn)知ECharts / 5

1.2.1　什么是ECharts / 6

1.2.2　ECharts的發(fā)展歷程 / 6

1.2.3　ECharts的主要功能與技術(shù)特點(diǎn) / 7

1.2.4　ECharts的使用場(chǎng)景 / 9

1.3　認(rèn)知ECharts支持的圖表類型 / 10

1.3.1　ECharts支持的圖表按功能進(jìn)行分類 / 10

1.3.2　ECharts支持的常見圖表按數(shù)據(jù)性質(zhì)和展示需求進(jìn)行分類 / 10

1.4　初識(shí)ECharts 5.x / 12

1.4.1　什么是ECharts 5.x / 13

1.4.2　ECharts 5.x的新特性與改進(jìn) / 13

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

1.4.4　ECharts 5.x的升級(jí)指南 / 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發(fā)布為echarts.min.js / 18

1.6　ECharts支持的數(shù)據(jù)格式與數(shù)據(jù)集 / 19

1.6.1　ECharts支持的數(shù)據(jù)格式 / 20

1.6.2　ECharts的數(shù)據(jù)集 / 21

1.7　編輯和嵌入ECharts圖表 / 24

1.8　使用ECharts進(jìn)行數(shù)據(jù)可視化和數(shù)據(jù)分析 / 24

1.8.1　使用ECharts進(jìn)行數(shù)據(jù)可視化 / 24

1.8.2　使用ECharts進(jìn)行數(shù)據(jù)分析 / 28

【實(shí)戰(zhàn)任務(wù)】 / 29

【任務(wù)1-1】指出各個(gè)圖表對(duì)應(yīng)的圖表類型和主要功能 / 29

【任務(wù)1-2】比較柱狀圖和條形圖 / 31

【任務(wù)1-3】比較散點(diǎn)圖和折線圖 / 33

模塊02　熟知ECharts的圖表結(jié)構(gòu)與基本組件 / 36

2.1　定義圖表容器及指定圖表大小 / 36

2.1.1　初始化圖表 / 36

2.1.2　圖表大小和實(shí)例管理 / 37

2.2　認(rèn)知與使用ECharts的坐標(biāo)系 / 38

2.2.1　認(rèn)知直角坐標(biāo)系 / 38

2.2.2　認(rèn)知極坐標(biāo)系 / 40

2.2.3　認(rèn)知地理坐標(biāo)系 / 41

2.2.4　認(rèn)知平行坐標(biāo)系 / 42

2.2.5　認(rèn)知單軸 / 42

2.2.6　認(rèn)知日歷坐標(biāo)系 / 42

2.3　認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ) / 42

2.4　設(shè)置ECharts圖表的樣式 / 49

2.4.1　設(shè)置顏色主題 / 49

2.4.2　設(shè)置調(diào)色盤 / 50

2.4.3　直接設(shè)置圖形元素的樣式 / 51

2.4.4　通過emphasis屬性定制高亮的樣式 / 51

2.4.5　數(shù)據(jù)的視覺映射 / 53

2.5　使用數(shù)據(jù)集管理數(shù)據(jù) / 55

2.5.1　在系列中設(shè)置數(shù)據(jù) / 55

2.5.2　在數(shù)據(jù)集中設(shè)置數(shù)據(jù) / 57

2.5.3　數(shù)據(jù)到圖形的映射 / 59

2.5.4　數(shù)據(jù)集的常用數(shù)據(jù)格式 / 67

2.5.5　多個(gè)數(shù)據(jù)集的定義及引用 / 68

2.6　使用transform進(jìn)行數(shù)據(jù)轉(zhuǎn)換 / 71

2.6.1　數(shù)據(jù)轉(zhuǎn)換的基礎(chǔ)操作 / 72

2.6.2　數(shù)據(jù)轉(zhuǎn)換的進(jìn)階操作 / 74

2.6.3　使用數(shù)據(jù)轉(zhuǎn)換器filter / 77

2.6.4　使用數(shù)據(jù)轉(zhuǎn)換器sort / 82

2.6.5　使用外部的數(shù)據(jù)轉(zhuǎn)換器進(jìn)行數(shù)據(jù)轉(zhuǎn)換 / 86

2.7　熟知ECharts的坐標(biāo)軸 / 89

2.7.1　直角坐標(biāo)系中的x軸、y軸 / 89

2.7.2　軸線 / 91

2.7.3　刻度 / 91

2.7.4　刻度標(biāo)簽 / 92

2.8　熟知ECharts的圖例 / 93

2.8.1　圖例的布局位置 / 93

2.8.2　圖例的樣式 / 94

2.8.3　圖例的交互操作 / 95

【實(shí)戰(zhàn)任務(wù)】 / 97

【任務(wù)2-1】繪制ECharts柱狀圖 / 97

【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置屬性 / 100

【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖 / 108

模塊03　繪制ECharts柱狀圖和條形圖 / 111

3.1　繪制基礎(chǔ)柱狀圖 / 111

3.1.1　繪制簡(jiǎn)單的柱狀圖 / 111

3.1.2　繪制多系列的柱狀圖 / 113

3.1.3　設(shè)置柱狀圖樣式 / 114

3.2　繪制堆疊柱狀圖 / 119

3.3　繪制瀑布圖 / 120

3.4　繪制動(dòng)態(tài)排序柱狀圖 / 121

3.5　繪制極坐標(biāo)系下的堆疊柱狀圖 / 124

3.6　繪制條形圖 / 125

3.6.1　繪制基礎(chǔ)條形圖 / 125

3.6.2　繪制正負(fù)條形圖 / 127

3.6.3　繪制堆疊條形圖 / 129

【實(shí)戰(zhàn)任務(wù)】 / 132

【任務(wù)3-1】繪制城市一周氣溫變化柱狀圖 / 132

【任務(wù)3-2】繪制柱狀圖對(duì)比降水量與蒸發(fā)量 / 134

【任務(wù)3-3】繪制柱狀圖統(tǒng)計(jì)天氣數(shù)據(jù) / 136

【任務(wù)3-4】繪制柱狀圖展示蒸發(fā)量、降水量和溫度之間的關(guān)系 / 137

【任務(wù)3-5】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值 / 141

【任務(wù)3-6】繪制動(dòng)態(tài)柱狀圖與折線圖 / 142

模塊04　繪制ECharts折線圖 / 144

4.1　繪制基礎(chǔ)折線圖 / 144

4.1.1　繪制簡(jiǎn)單的折線圖 / 144

4.1.2　設(shè)置折線圖樣式 / 146

4.1.3　在折線圖的數(shù)據(jù)點(diǎn)處顯示數(shù)值 / 147

4.1.4　繪制包含空數(shù)據(jù)的折線圖 / 148

4.2　繪制堆疊折線圖 / 149

4.3　繪制區(qū)域面積折線圖 / 151

4.4　繪制平滑折線圖 / 153

4.5　繪制階梯折線圖 / 153

【實(shí)戰(zhàn)任務(wù)】 / 155

【任務(wù)4-1】繪制銷量折線圖分析促銷措施對(duì)商品銷量的影響 / 155

【任務(wù)4-2】繪制城市一周氣溫變化折線圖 / 157

【任務(wù)4-3】繪制一天用電量分布圖 / 158

【任務(wù)4-4】繪制長(zhǎng)沙市空氣質(zhì)量指數(shù)變化折線圖，對(duì)比分析10月15天的空氣質(zhì)量指數(shù)變化 / 158

【任務(wù)4-5】繪制函數(shù)圖形 / 161

模塊05　繪制ECharts餅圖 / 163

5.1　繪制基礎(chǔ)餅圖 / 163

5.1.1　繪制簡(jiǎn)單的餅圖 / 163

5.1.2　設(shè)置餅圖樣式 / 164

5.2　繪制圓環(huán)圖 / 166

5.2.1　繪制基礎(chǔ)圓環(huán)圖 / 166

5.2.2　在圓環(huán)圖中間顯示高亮區(qū)域?qū)��?yīng)的文字 / 168

5.3　繪制南丁格爾玫瑰圖 / 169

【實(shí)戰(zhàn)任務(wù)】 / 171

【任務(wù)5-1】繪制包含扇區(qū)間隙的餅圖，分析不同訪問途徑對(duì)廣告效果的影響 / 171

【任務(wù)5-2】繪制南丁格爾玫瑰圖，分析不同訪問途徑對(duì)廣告效果的影響 / 173

【任務(wù)5-3】繪制嵌套環(huán)形圖，分析不同訪問途徑對(duì)廣告效果的影響 / 175

模塊06　繪制ECharts散點(diǎn)圖和氣泡圖 / 176

6.1　繪制散點(diǎn)圖 / 176

6.1.1　繪制簡(jiǎn)單的散點(diǎn)圖 / 176

6.1.2　設(shè)置散點(diǎn)圖的樣式 / 177

6.2　繪制氣泡圖 / 180

【實(shí)戰(zhàn)任務(wù)】 / 181

【任務(wù)6-1】繪制男性和女性身高、體重分布圖 / 181

【任務(wù)6-2】繪制城市AQI氣泡圖 / 183

模塊07　繪制ECharts高級(jí)圖表 / 184

7.1　繪制K線圖 / 184

7.2　繪制雷達(dá)圖 / 185

7.2.1　繪制基礎(chǔ)雷達(dá)圖 / 185

7.2.2　繪制多雷達(dá)圖 / 187

7.3　繪制盒須圖 / 187

7.4　繪制熱力圖 / 189

7.5　繪制儀表盤 / 192

【實(shí)戰(zhàn)任務(wù)】 / 193

【任務(wù)7-1】繪制城市AQI雷達(dá)圖 / 193

【任務(wù)7-2】繪制某城市一年氣溫變化盒須圖 / 194

【任務(wù)7-3】繪制日歷熱力圖 / 196

【任務(wù)7-4】繪制速度儀表盤 / 198

【任務(wù)7-5】繪制項(xiàng)目完成率儀表盤 / 199

模塊08　繪制ECharts特殊圖表 / 202

8.1　繪制關(guān)系圖 / 202

8.2　繪制矩形樹圖 / 205

8.3　繪制旭日?qǐng)D / 209

8.4　繪制平行坐標(biāo)圖 / 210

8.5　繪制桑基圖 / 211

8.6　繪制漏斗圖 / 214

【實(shí)戰(zhàn)任務(wù)】 / 216

【任務(wù)8-1】繪制日歷關(guān)系圖 / 216

【任務(wù)8-2】繪制標(biāo)簽旋轉(zhuǎn)旭日?qǐng)D / 217

【任務(wù)8-3】繪制AQI分布圖（平行坐標(biāo)圖） / 217

模塊09　應(yīng)用ECharts高級(jí)功能 / 219

9.1　ECharts的事件與行為 / 219

9.1.1　鼠標(biāo)事件的處理 / 219

9.1.2　組件交互行為事件的處理 / 221

9.1.3　代碼觸發(fā)ECharts中組件的行為 / 221

9.1.4　監(jiān)聽空白處的事件 / 223

9.2　使用ECharts的富文本標(biāo)簽 / 224

9.2.1　文本樣式相關(guān)的配置項(xiàng) / 226

9.2.2　文本、文本框、文本片段的基本樣式和裝飾 / 227

9.2.3　標(biāo)簽的位置 / 228

9.2.4　文本片段的排版和對(duì)齊 / 229

9.3　繪制ECharts圖形時(shí)實(shí)現(xiàn)異步數(shù)據(jù)的加載與動(dòng)態(tài)更新 / 230

9.3.1　異步加載 / 230

9.3.2　應(yīng)用loading動(dòng)畫 / 232

9.3.3　動(dòng)態(tài)更新 / 232

9.4　更新數(shù)據(jù)時(shí)配置過渡動(dòng)畫效果 / 235

9.4.1　過渡動(dòng)畫的配置 / 236

9.4.2　動(dòng)畫的性能優(yōu)化 / 239

9.4.3　監(jiān)聽動(dòng)畫結(jié)束 / 239

9.5　服務(wù)端渲染ECharts圖表 / 240

9.5.1　服務(wù)端渲染 / 240

9.5.2　客戶端二次渲染 / 243

【實(shí)戰(zhàn)任務(wù)】 / 245

【任務(wù)9-1】繪制旋轉(zhuǎn)標(biāo)簽的柱狀圖 / 245

【任務(wù)9-2】繪制包含富文本標(biāo)簽的餅圖，分析城市各區(qū)域的各類天氣狀況的分布情況 / 247

【任務(wù)9-3】實(shí)現(xiàn)ECharts曲線圖形的拖曳操作 / 247