富文字標籤
# 富文字標籤
在許多地方（如圖、軸的標籤等）都可以使用富文字標籤。例如：
其他一些例子：Pie Labels (opens new window),Gauge (opens new window).
原先 Apache EChartsTM 中的文字標籤，只能對整塊統一進行樣式設定，並且僅僅支援顏色和字型的設定，從而導致不易於製作表達能力更強的文字描述資訊。
echarts v3.7 以後，支援了富文字標籤，能夠：
- 定製文字塊整體的樣式（如背景、邊框、陰影等）、位置、旋轉等。
- 對文字塊中個別片段定義樣式（如顏色、字型、高寬、背景、陰影等）、對齊方式等。
- 在文字中使用圖片做小圖示或者背景。
- 特定組合以上的規則，可以做出簡單表格、分割線等效果。
開始下面的介紹之前，先說明一下下面會使用的兩個名詞的含義：
- 文字塊（Text Block）：文字標籤塊整體。
- 文字片段（Text fragment）：文字標籤塊中的部分文字。
如下圖示例：
# 1. 文字樣式相關的配置項
echarts 提供了豐富的文字標籤配置項，包括：
- 字型基本樣式設定：
fontStyle、fontWeight、fontSize、fontFamily。 - 文字顏色：
color。 - 文字描邊：
textBorderColor、textBorderWidth。 - 文字陰影：
textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。 - 文字塊或文字片段大小：
lineHeight、width、height、padding。 - 文字塊或文字片段的對齊：
align、verticalAlign。 - 文字塊或文字片段的邊框、背景（顏色或圖片）：
backgroundColor、borderColor、borderWidth、borderRadius。 - 文字塊或文字片段的陰影：
shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。 - 文字塊的位置和旋轉：
position、distance、rotate。
可以在各處的 rich 屬性中定義文字片段樣式。例如 series-bar.label.rich
例如：
label: {
// 在文字中，可以對部分文字採用 rich 中定義樣式。
// 這裡需要在文字中使用標記符號：
// `{styleName|text content text content}` 標記樣式名。
// 注意，換行仍是使用 '\n'。
formatter: [
'{a|這段文字採用樣式a}',
'{b|這段文字採用樣式b}這段用預設樣式{x|這段用樣式x}'
].join('\n'),
// 這裡是文字塊的樣式設定：
color: '#333',
fontSize: 5,
fontFamily: 'Arial',
borderWidth: 3,
backgroundColor: '#984455',
padding: [3, 10, 10, 5],
lineHeight: 20,
// rich 里是文字片段的樣式設定：
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
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
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
注意：如果不定義
rich，不能指定文字塊的width和height。
# 2. 文字、文字框、文字片段的基本樣式和裝飾
每個文字可以設定基本的字型樣式：fontStyle、fontWeight、fontSize、fontFamily。
可以設定文字的顏色 color 和邊框的顏色 textBorderColor、textBorderWidth。
文字框可以設定邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding。
文字片段也可以設定邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding。
例如：
圖表來源：https://echarts.apache.org/examples/zh/editor.html?c=doc-example/text-options (opens new window)
FastWeb TUgEChart示例：
如需在FastWeb中的TUgEChart中實現上述效果，則修改其Options屬性，使用下列配置：
option = {
series: [
{
type: 'scatter',
symbolSize: 1,
data: [{
value: [0, 0],
label: {
normal: {
show: true,
formatter: [
'Plain text',
'{textBorder|textBorderColor + textBorderWidth}',
'{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',
'{bg|backgroundColor + borderRadius + padding}',
'{border|borderColor + borderWidth + borderRadius + padding}',
'{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#333',
borderWidth: 2,
borderRadius: 5,
padding: 10,
color: '#000',
fontSize: 14,
shadowBlur: 3,
shadowColor: '#888',
shadowOffsetX: 0,
shadowOffsetY: 3,
lineHeight: 30,
rich: {
textBorder: {
fontSize: 20,
textBorderColor: '#000',
textBorderWidth: 3,
color: '#fff'
},
textShadow: {
fontSize: 16,
textShadowBlur: 5,
textShadowColor: '#000',
textShadowOffsetX: 3,
textShadowOffsetY: 3,
color: '#fff'
},
bg: {
backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
padding: 5
},
border: {
color: '#000',
borderColor: '#449911',
borderWidth: 1,
borderRadius: 3,
padding: 5
},
shadow: {
backgroundColor: '#992233',
padding: 5,
color: '#fff',
shadowBlur: 5,
shadowColor: '#336699',
shadowOffsetX: 6,
shadowOffsetY: 6
}
}
}
}
}]
}
],
xAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
}
};
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
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
- 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: 800px;height:500px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
var option;
option = {
series: [
{
type: 'scatter',
symbolSize: 1,
data: [{
value: [0, 0],
label: {
normal: {
show: true,
formatter: [
'Plain text',
'{textBorder|textBorderColor + textBorderWidth}',
'{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',
'{bg|backgroundColor + borderRadius + padding}',
'{border|borderColor + borderWidth + borderRadius + padding}',
'{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#333',
borderWidth: 2,
borderRadius: 5,
padding: 10,
color: '#000',
fontSize: 14,
shadowBlur: 3,
shadowColor: '#888',
shadowOffsetX: 0,
shadowOffsetY: 3,
lineHeight: 30,
rich: {
textBorder: {
fontSize: 20,
textBorderColor: '#000',
textBorderWidth: 3,
color: '#fff'
},
textShadow: {
fontSize: 16,
textShadowBlur: 5,
textShadowColor: '#000',
textShadowOffsetX: 3,
textShadowOffsetY: 3,
color: '#fff'
},
bg: {
backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
padding: 5
},
border: {
color: '#000',
borderColor: '#449911',
borderWidth: 1,
borderRadius: 3,
padding: 5
},
shadow: {
backgroundColor: '#992233',
padding: 5,
color: '#fff',
shadowBlur: 5,
shadowColor: '#336699',
shadowOffsetX: 6,
shadowOffsetY: 6
}
}
}
}
}]
}
],
xAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
}
};
// 使用剛指定的配置項和數據顯示圖表。
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
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
103
104
105
106
107
108
109
110
111
112
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
103
104
105
106
107
108
109
110
111
112
# 3. 標籤的位置
對於折線圖、柱狀圖、散點圖等，均可以使用 label 來設定標籤。標籤的相對於圖形元素的位置，一般使用 label.position、label.distance 來配置。
例如：
圖表來源：https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position (opens new window)
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: 800px;height:500px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
var option;
var app = {};
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
app.configParameters = {
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
position: 'top',
distance: 20,
onChange: function () {
myChart.setOption({
series: {
type: 'scatter',
label: {
normal: {
position: app.config.position,
distance: app.config.distance
}
}
}
});
}
};
option = {
series: [
{
type: 'scatter',
symbolSize: 160,
symbol: 'roundRect',
data: [[1, 1]],
label: {
normal: {
position: app.config.position,
distance: app.config.distance,
show: true,
formatter: [
'Label Text',
].join('\n'),
backgroundColor: '#eee',
borderColor: '#555',
borderWidth: 2,
borderRadius: 5,
padding: 10,
fontSize: 18,
shadowBlur: 3,
shadowColor: '#888',
shadowOffsetX: 0,
shadowOffsetY: 3,
textBorderColor: '#000',
textBorderWidth: 3,
color: '#fff'
}
}
}
],
xAxis: {
max: 2
},
yAxis: {
max: 2
}
};
// 使用剛指定的配置項和數據顯示圖表。
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
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
103
104
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
103
104
注意：
position在不同的圖中可取值有所不同。distance並不是在每個圖中都支援。詳情請參見 option 文件。
# 4. 標籤的旋轉
某些圖中，爲了能有足夠長的空間來顯示標籤，需要對標籤進行旋轉。例如：
圖表來源：https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation (opens new window)
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: 800px;height:500px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
var option;
var app = {};
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
}
}
};
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
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
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
這種場景下，可以結合 align 和 verticalAlign 來調整標籤位置。
注意，邏輯是，先使用 align 和 verticalAlign 定位，再旋轉。
# 5. 文字片段的排版和對齊
關於排版方式，每個文字片段，可以想像成 CSS 中的 inline-block，在文件流中按行放置。
每個文字片段的內容盒尺寸（content box size），預設是根據文字大小決定的。但是，也可以設定 width、height 來強制指定，雖然一般不會這麼做（參見下文）。文字片段的邊框盒尺寸（border box size），由上述本身尺寸，加上文字片段的 padding 來得到。
只有 '\n' 是換行符，能導致換行。
一行內，會有多個文字片段。每行的實際高度，由 lineHeight 最大的文字片段決定。文字片段的 lineHeight 可直接在 rich 中指定，也可以在 rich 的父層級中統一指定而採用到 rich 的所有項中，如果都不指定，則取文字片段的邊框盒尺寸（border box size）。
在一行的 lineHeight 被決定后，一行內，文字片段的豎直位置，由文字片段的 verticalAlign 來指定（這裡和 CSS 中的規則稍有不同）：
'bottom'：文字片段的盒的底邊貼住行底。'top'：文字片段的盒的頂邊貼住行頂。'middle'：居行中。
文字塊的寬度，可以直接由文字塊的 width 指定，否則，由最長的行決定。寬度決定后，在一行中進行文字片段的放置。文字片段的 align 決定了文字片段在行中的水平位置：
- 首先，從左向右連續緊靠放置
align為'left'的文字片段盒。 - 然後，從右向左連續緊靠放置
align為'right'的文字片段盒。 - 最後，剩餘的沒處理的文字片段盒，緊貼著，在中間剩餘的區域中居中放置。
關於文字在文字片段盒中的位置：
- 如果
align為'center'，則文字在文字片段盒中是居中的。 - 如果
align為'left'，則文字在文字片段盒中是居左的。 - 如果
align為'right'，則文字在文字片段盒中是居右的。
# 6. 特殊效果：圖示、分割線、標題塊、簡單表格
看下面的例子：
- 圖表來源：https://echarts.apache.org/examples/zh/editor.html?c=doc-example/title-block (opens new window)
文字片段的 backgroundColor 可以指定為圖片后，就可以在文字中使用圖示了：
rich: {
Sunny: {
// 這樣設定 backgroundColor 就可以是圖片了。
backgroundColor: {
image: './data/asset/img/weather/sunny_128.png'
},
// 可以只指定圖片的高度，從而圖片的寬度根據圖片的長寬比自動得到。
height: 30
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
分割線實際是用 border 實現的：
rich: {
hr: {
borderColor: '#777',
// 這裡把 width 設定為 '100%'，表示分割線的長度充滿文字塊。
// 注意，這裡是文字塊內容盒（content box）的 100%，而不包含 padding。
// 雖然這和 CSS 相關的定義有所不同，但是在這類場景中更加方便。
width: '100%',
borderWidth: 0.5,
height: 0
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
標題塊是使用 backgroundColor 實現的：
// 標題文字居左
formatter: '{titleBg|Left Title}',
rich: {
titleBg: {
backgroundColor: '#000',
height: 30,
borderRadius: [5, 5, 0, 0],
padding: [0, 10, 0, 10],
width: '100%',
color: '#eee'
}
}
// 標題文字居中。
// 這個實現有些 tricky，但是，能夠不引入更復雜的排版規則而實現這個效果。
formatter: '{tc|Center Title}{titleBg|}',
rich: {
titleBg: {
align: 'right',
backgroundColor: '#000',
height: 30,
borderRadius: [5, 5, 0, 0],
padding: [0, 10, 0, 10],
width: '100%',
color: '#eee'
}
}
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
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
- 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: 800px;height:500px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
var option;
var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var app = {};
var weatherIcons = {
'Sunny': ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
'Cloudy': ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
'Showers': ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};
option = {
series: [
{
type: 'scatter',
data: [
{
value: [0,0],
label: {
normal: {
formatter: [
'{tc|Center Title}{titleBg|}',
' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
'{hr|}',
' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
].join('\n'),
rich: {
titleBg: {
align: 'right'
}
}
}
}
},
{
value: [0, 1],
label: {
normal: {
formatter: [
'{titleBg|Left Title}',
' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
'{hr|}',
' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
].join('\n')
}
}
},
{
value: [0, 2],
label: {
normal: {
formatter: [
'{titleBg|Right Title}',
' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
'{hr|}',
' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
].join('\n'),
rich: {
titleBg: {
align: 'right'
}
}
}
}
}
],
symbolSize: 1,
label: {
normal: {
show: true,
backgroundColor: '#ddd',
borderColor: '#555',
borderWidth: 1,
borderRadius: 5,
color: '#000',
fontSize: 14,
rich: {
titleBg: {
backgroundColor: '#000',
height: 30,
borderRadius: [5, 5, 0, 0],
padding: [0, 10, 0, 10],
width: '100%',
color: '#eee'
},
tc: {
align: 'center',
color: '#eee'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
}
}
}
}
}
],
xAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: 0,
max: 2,
inverse: true
}
};
// 使用剛指定的配置項和數據顯示圖表。
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
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
簡單表格的設定，其實就是給不同行上縱向對應的文字片段設定同樣的寬度就可以了。參見本文最開始的 例子 (opens new window)。