九十一、前端可視化ECharts的使用
@Author:Runsen
學(xué)python的應(yīng)該聽過Pyecharts。那么就應(yīng)該有ECharts
這次介紹的就是一個(gè)基于Javascript的數(shù)據(jù)可視化庫(kù)ECharts。
Echarts 由百度的前端技術(shù)部開發(fā)，是一款難得的由國(guó)內(nèi)廠商開源的JS代碼庫(kù)，相比同類產(chǎn)品如 highcharts，google charts 都有著相當(dāng)?shù)母?jìng)爭(zhēng)力。并且用的人不少，說明文檔較容易找到，上手簡(jiǎn)單。
ECharts入門
我們可以在直接下載echarts.min.js并用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
需要了解的主要配置：
series；xAxis；yAxis；grid ；tooltip；title；legend；color
series
系列列表。每個(gè)系列通過 type 決定自己的圖表類型
大白話：圖標(biāo)數(shù)據(jù)，指定什么類型的圖標(biāo)，可以多個(gè)圖表重疊。
xAxis：直角坐標(biāo)系 grid 中的 x 軸
boundaryGap: 坐標(biāo)軸兩邊留白策略 true，這時(shí)候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間。
yAxis：直角坐標(biāo)系 grid 中的 y 軸
grid：直角坐標(biāo)系內(nèi)繪圖網(wǎng)格。修改圖表的大小
title：標(biāo)題組件
tooltip：提示框組件
legend：圖例組件
color：調(diào)色盤顏色列表
折線圖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
區(qū)域縮放 dataZoom
dataZoom用于區(qū)域縮放，對(duì)數(shù)據(jù)范圍過濾，x軸和y軸都可以設(shè)置
dataZoom是一個(gè)數(shù)組 可以配置多個(gè)區(qū)域縮放器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
餅圖
相比于柱狀圖，餅圖的數(shù)據(jù)格式更加簡(jiǎn)單，它數(shù)值是一維的，無需給出類目。
餅圖不在直角坐標(biāo)系上實(shí)現(xiàn)，自然也不需要 xAxis 和 yAxis。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
儀表盤
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
地圖
地圖圖表的使用方式
百度地圖API : 使用百度地圖的 api , 它能夠在線聯(lián)網(wǎng)展示地圖, 百度地圖需要申請(qǐng) ak
矢量地圖 : 可以離線展示地圖, 需要開發(fā)者準(zhǔn)備矢量地圖數(shù)據(jù)
接下來的實(shí)現(xiàn)是通過矢量圖的方式來實(shí)現(xiàn)的
準(zhǔn)備中國(guó)的矢量 json 文件, 放到 json/map/ 目錄之下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
地圖的常見配置
縮放拖動(dòng): roam
名稱顯示: label
初始縮放比例: zoom
地圖中心點(diǎn): center
地圖和散點(diǎn)圖結(jié)合
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
API GitHub web前端
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
