動態排序柱狀圖
# 動態排序柱狀圖
動態排序柱狀圖是一種展示隨時間變化的數據排名變化的圖表，從 ECharts 5 開始內建支援。
動態排序柱狀圖通常是橫向的柱條，如果想要採用縱向的柱條，只要把本教程中的 X 軸和 Y 軸相反設定即可。
yAxis.realtimeSort設為true，表示開啟 Y 軸的動態排序效果yAxis.inverse設為true，表示 Y 軸從下往上是從小到大的排列yAxis.animationDuration建議設為300，表示第一次柱條排序動畫的時長yAxis.animationDurationUpdate建議設為300，表示第一次後柱條排序動畫的時長- 如果想只顯示前 n 名，將
yAxis.max設為 n - 1，否則顯示所有柱條 xAxis.max建議設為'dataMax'表示用數據的最大值作為 X 軸最大值，視覺效果更好- 如果想要實時改變標籤，需要將
series.label.valueAnimation設為true animationDuration設為0，表示第一份數據不需要從0開始動畫（如果希望從0開始則設為和animationDurationUpdate相同的值）animationDurationUpdate建議設為3000表示每次更新動畫時長，這一數值應與呼叫setOption改變數據的頻率相同- 以
animationDurationUpdate的頻率呼叫setInterval，更新數據值，顯示下一個時間點對應的柱條排序
完整的例子如下：
- 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;
var data = [];
for (let i = 0; i < 5; ++i) {
data.push(Math.round(Math.random() * 200));
}
option = {
xAxis: {
max: 'dataMax',
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 2 // only the largest 3 bars will be displayed
},
series: [{
realtimeSort: true,
name: 'X',
type: 'bar',
data: data,
label: {
show: true,
position: 'right',
valueAnimation: true
}
}],
legend: {
show: true
},
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear'
};
function run () {
var data = option.series[0].data;
for (var i = 0; i < data.length; ++i) {
if (Math.random() > 0.9) {
data[i] += Math.round(Math.random() * 2000);
}
else {
data[i] += Math.round(Math.random() * 200);
}
}
myChart.setOption(option);
}
setTimeout(function() {
run();
}, 0);
setInterval(function () {
run();
}, 3000);
// 使用剛指定的配置項和數據顯示圖表。
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
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
以上的設定項比較多，如果手動設定比較繁瑣，之後ECharts官方將推出不用寫程式碼就能實現動態排序柱狀圖的工具，敬請期待！