Web數據可視化教程（基於ECharts）

孫道遠，男，碩士，副教授，安徽工貿職業技術學院計算機信息工程學院副院長 ，中國科學技術大學國內訪問學者，安徽省職業院校技能大賽一等獎指導教師，高級網絡工程師，安徽省高等學校教學名師，曾獲安徽省教學成果獎二等獎 ，發表論文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