动态排序柱状图
# 动态排序柱状图
动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 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官方将推出不用写代码就能实现动态排序柱状图的工具，敬请期待！