- 例子 http://gallery.echartsjs.com/editor.html?c=xH1m8vv1Xf
echarts多组数据采用timeline分页浏览
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
57var chart_bar = echarts.init(document.getElementsById('chart'))
chart_bar.setOption({
//timeline基本配置都写在baseoption 中
baseOption: {
timeline: {
//loop: false,
axisType: 'category',
show: true,
autoPlay: true,
playInterval: 1500,
data: ['1990', '1995']
},
grid: {containLabel: true},
xAxis: [{
type: 'value',
name: '万美元',
},],
yAxis: [{
type: 'category',
inverse: true,
}],
series: [
{
type: 'bar',
},
]
},
//变量则写在options中
options: [
//1990
{
yAxis: [{
data: ['瑞士', '卢森堡', '瑞典']
}],
title: {
text: '1990年统计值'
},
series: [{
data: [385,333,297]
}]
},
//1995
{
yAxis: [{
data: ['卢森堡','瑞士', '日本']
}],
title: {
text: '1995年统计值'
},
series: [
{
data: [511,487,425]
}
]
},
]
});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
31var xData = [
['瑞士', '卢森堡', '瑞典'],
['卢森堡','瑞士', '日本']
]
var title = [
'1990年统计值','1995年统计值'
]
var serveData = [
[38589.18, 33378.44, 29794.08],
[51189.75, 48712.21, 42516.46]
]
var options = [];
var Xaxis = [];
var series = [];
var timeline = [];
for (let i = 0; i < xData.length; i++) {
timeline.push('')
options.push({
xAxis:[{
data: xData[i]
}],
title: {
text: title[i]
},
series: [
{
data: serveData[i]
},
]
})
}动态实现timeline
- 数据格式
1
2
3
4{
"xaxis":["瑞士", "卢森堡", "瑞典", "挪威", "丹麦", "阿联酋"],
"data":[1,2,43,54,32,43]
}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$.ajax({
type:"get",
url:"1.json",
dataType: 'json',
success:function(data){
var x = data.xaxis;
var data = data.data;
var xData =[];
var serveData = [];
//转换为2维数组
for (let i = 0; i < x.length; i++) {
var page = Math.floor(i/3);
if(!xData[page]){
xData[page] = [];
};
xData[page].push(x[i]);
}
for (let i = 0; i < data.length; i++) {
var page_ = Math.floor(i/3);
if(!serveData[page_]){
serveData[page_] = [];
};
serveData[page_].push(data[i]);
}
var options = [];
var Xaxis = [];
var series = [];
var timeline = [];
for (let i = 0; i < xData.length; i++) {
timeline.push('')
options.push({
yAxis:[{
data: xData[i]
}],
series: [
{
data: serveData[i]
},
]
})
}
echart_(timeline,options)
}
});
function echart_(timeline,options){
chart_bar.setOption(
{
//timeline基本配置都写在baseoption 中
baseOption: {
title: {
text: '塔吊正常率统计',
padding: [10, 0, 0, 16],
textStyle: {
color: '#ffffff',
fontSize: 12,
}
},
tooltip: {
trigger: 'axis'
},
timeline: {
//loop: false,
axisType: 'category',
show: true,
autoPlay: false,
playInterval: 1500,
controlStyle:{//按钮样式
show:false
},
checkpointStyle: {
color: '#04a5f1',
borderColor: 'rgba(4, 165, 261, .5)'
},
data: timeline
},
grid: {containLabel: true},
xAxis: [{
type: 'value',
name: '万美元',
},],
yAxis: [{
type: 'category',
inverse: true,
}],
series: [
{
type: 'bar',
},
]
//变量则写在options中
options: options
}
);
}
