個性化圖表的樣式
# 個性化圖表的樣式
ECharts 提供了豐富的自定義配置選項，並且能夠從全域性、系列、數據三個層級去設定數據圖形的樣式。下面我們來看如何使用 ECharts 實現下面這個南丁格爾圖：
# 1. 繪製南丁格爾圖
5分鐘上手ECharts 中講了如何繪製一個簡單的柱狀圖，這次要畫的是餅圖，餅圖主要是通過扇形的弧度表現不同類目的數據在總和中的佔比，它的數據格式比柱狀圖更簡單，只有一維的數值，不需要給類目。因為不在直角座標系上，所以也不需要xAxis，yAxis。
myChart.setOption({
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- FastWeb TUgEChart示例：
如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：
option = {
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- FastWeb TUgURLFrame示例：
如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
})
</script>
</body>
</html>
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
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
上面程式碼就能畫出一個簡單的餅圖：
這裡data屬性值不像入門教程里那樣每一項都是單個數值，而是一個包含 name 和 value 屬性的對象，ECharts 中的數據項都是既可以只設成數值，也可以設成一個包含有名稱、該數據圖形的樣式配置、標籤配置的對象，具體見 data 文件。
ECharts 中的餅圖也支援通過設定 roseType 顯示成南丁格爾圖。
roseType: 'angle'
1
南丁格爾圖會通過半徑表示數據的大小。
- FastWeb TUgEChart示例：
如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：
option = {
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- FastWeb TUgURLFrame示例：
如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
roseType: 'angle', //插入此處
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
})
</script>
</body>
</html>
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
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
# 2. 陰影的配置
ECharts 中有一些通用的樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等，這些樣式一般都會在系列的 itemStyle 里設定。例如陰影的樣式可以通過下面幾個配置項設定：
itemStyle: {
// 陰影的大小
shadowBlur: 200,
// 陰影水平方向上的偏移
shadowOffsetX: 0,
// 陰影垂直方向上的偏移
shadowOffsetY: 0,
// 陰影顏色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- FastWeb TUgEChart示例：
如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：
option = {
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- FastWeb TUgURLFrame示例：
如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
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
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
加上陰影后的效果：
itemStyle的emphasis是滑鼠 hover 時候的高亮樣式。這個示例里是正常的樣式下加陰影，但是可能更多的時候是 hover 的時候通過陰影突出。
itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
1
2
3
4
5
6
2
3
4
5
6
# 3. 深色背景和淺色標籤
現在我們需要把整個主題改成開始的示例中那樣的深色主題，這就需要改背景色和文字顏色。
背景色是全域性的，所以直接在 option 下設定 backgroundColor。
setOption({
backgroundColor: '#2c343c'
})
1
2
3
2
3
文字的樣式可以設定全域性的 textStyle。
setOption({
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
})
1
2
3
4
5
2
3
4
5
餅圖的話還要將標籤的視覺引導線的顏色設為淺色。
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
1
2
3
4
5
2
3
4
5
- FastWeb TUgEChart示例：
如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：
option = {
backgroundColor: '#2c343c',
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
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
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
- FastWeb TUgURLFrame示例：
如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
backgroundColor: '#2c343c',
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
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
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
如下：
跟itemStyle一樣，label和labelLine的樣式也有emphasis狀態。
# 4. 設定扇形的顏色
扇形的顏色也是在 itemStyle 中設定：
itemStyle: {
// 設定扇形的顏色
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
1
2
3
4
5
6
2
3
4
5
6
- FastWeb TUgEChart示例：
如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：
option = {
backgroundColor: '#2c343c',
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
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
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
- FastWeb TUgURLFrame示例：
如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
backgroundColor: '#2c343c',
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
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
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
與我們要實現的效果已經挺像了，除了每個扇形的顏色，效果中陰影下面的扇形顏色更深，有種光線被遮住的感覺，從而會出現層次感和空間感。
ECharts 中每個扇形顏色的可以通過分別設定 data 下的數據項實現。
data: [{
value:400,
name:'搜索引擎',
itemStyle: {
color: '#c23531'
}
}, ...]
1
2
3
4
5
6
7
2
3
4
5
6
7
但是這次因為只有明暗度的變化，所以有一種更快捷的方式是通過 visualMap 元件將數值的大小對映到明暗度。
visualMap: {
// 不顯示 visualMap 元件，只用于明暗度的對映
show: false,
// 對映的最小值為 80
min: 80,
// 對映的最大值為 600
max: 600,
inRange: {
// 明暗度的範圍是 0 到 1
colorLightness: [0, 1]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- FastWeb TUgEChart示例：
如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：
option = {
backgroundColor: '#2c343c',
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
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
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
- FastWeb TUgURLFrame示例：
如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
backgroundColor: '#2c343c',
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視訊廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
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
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
最終效果：
