dashboard.js
4.0 KB
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
define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
var Controller = {
index: function () {
// 基于准备好的dom，初始化echarts实例
var myChart = Echarts.init(document.getElementById('echart'), 'walden');
// 指定图表的配置项和数据
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [__('Sales'), __('Orders')]
},
toolbox: {
show: false,
feature: {
magicType: {show: true, type: ['stack', 'tiled']},
saveAsImage: {show: true}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: Orderdata.column
},
yAxis: {},
grid: [{
left: 'left',
top: 'top',
right: '10',
bottom: 30
}],
series: [{
name: __('Sales'),
type: 'line',
smooth: true,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1.5
}
},
data: Orderdata.paydata
},
{
name: __('Orders'),
type: 'line',
smooth: true,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1.5
}
},
data: Orderdata.createdata
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//动态添加数据，可以通过Ajax获取数据然后填充
setInterval(function () {
Orderdata.column.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
var amount = Math.floor(Math.random() * 200) + 20;
Orderdata.createdata.push(amount);
Orderdata.paydata.push(Math.floor(Math.random() * amount) + 1);
//按自己需求可以取消这个限制
if (Orderdata.column.length >= 20) {
//移除最开始的一条数据
Orderdata.column.shift();
Orderdata.paydata.shift();
Orderdata.createdata.shift();
}
myChart.setOption({
xAxis: {
data: Orderdata.column
},
series: [{
name: __('Sales'),
data: Orderdata.paydata
},
{
name: __('Orders'),
data: Orderdata.createdata
}]
});
if ($("#echart").width() != $("#echart canvas").width() && $("#echart canvas").width() < $("#echart").width()) {
myChart.resize();
}
}, 2000);
$(window).resize(function () {
myChart.resize();
});
$(document).on("click", ".btn-checkversion", function () {
top.window.$("[data-toggle=checkupdate]").trigger("click");
});
}
};
return Controller;
});