1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > Title</ title >
6+ </ head >
7+ < body >
8+
9+ </ body >
10+ < script type ="application/javascript ">
11+ var dataUser = [ ] ;
12+ var dataCount = [ ] ;
13+
14+ function rand ( a ) {
15+ let time = ( new Date ( ) ) . getTime ( ) - 3600 * 1000 * a ;
16+ let value = Math . random ( ) * 100 ;
17+ return {
18+ name : updateTime ( time ) ,
19+ value : [
20+ [ updateTime ( time ) ,
21+ value
22+ ]
23+ }
24+ } ;
25+
26+ function updateTime ( timestamp ) {
27+ let time ;
28+ if ( timestamp != null && timestamp != "" && timestamp != 0 ) {
29+ time = timestamp + "" ;
30+ }
31+ let date = new Date ( timestamp ) ;
32+ let Y = date . getFullYear ( ) + '-' ;
33+ let M = ( date . getMonth ( ) + 1 < 10 ? '0' + ( date . getMonth ( ) + 1 ) : date . getMonth ( ) + 1 ) + '-' ;
34+ let D = ( date . getDate ( ) < 10 ? '0' + ( date . getDate ( ) ) : date . getDate ( ) ) + ' ' ;
35+ let h = ( date . getHours ( ) < 10 ? '0' + date . getHours ( ) : date . getHours ( ) ) + ':' ;
36+ let m = ( date . getMinutes ( ) < 10 ? '0' + date . getMinutes ( ) : date . getMinutes ( ) + ':' ) ;
37+ let s = date . getSeconds ( ) ;
38+ return Y + M + D + h + m + s ;
39+ }
40+
41+ for ( let i = 0 ; i < 10 ; i ++ ) {
42+ dataUser . push ( rand ( i ) ) ;
43+ dataCount . push ( rand ( i ) ) ;
44+ }
45+
46+ var option = {
47+ tooltip : {
48+ trigger : 'axis' ,
49+ axisPointer : {
50+ type : 'cross' ,
51+ label : {
52+ backgroundColor : '#6a7985'
53+ }
54+ }
55+ } ,
56+ legend : {
57+ data : [ '在线人数' , '访问次数' ] ,
58+ right : '60px'
59+ } ,
60+ grid : {
61+ x : 50 ,
62+ y : 25 ,
63+ x2 : 50 ,
64+ y2 : 30 ,
65+ // borderWidth:1
66+ } ,
67+ dataZoom : [
68+ {
69+ type : 'slider' , //图表下方的伸缩条
70+ show : false , //是否显示
71+ realtime : true , //
72+ start : 0 , //伸缩条开始位置（1-100），可以随时更改
73+ end : 100 , //伸缩条结束位置（1-100），可以随时更改
74+ xAxisIndex : [ 0 ] ,
75+ filterMode : 'none'
76+ } ] ,
77+ xAxis : [
78+ {
79+ type : 'time' ,
80+ boundaryGap : false ,
81+ // data: [/*'周一','周二','周三','周四','周五','周六','周日'*/],
82+ splitLine : {
83+ show : false
84+ } ,
85+ splitNumber : 12 ,
86+ axisLine : {
87+ lineStyle : {
88+ color : '#FFF'
89+ }
90+ } ,
91+ }
92+ ] ,
93+ yAxis : [
94+ {
95+ type : 'value' ,
96+ name : '人' ,
97+ nameGap : 6 ,
98+ splitLine : {
99+ show : false
100+ }
101+ } ,
102+ {
103+ type : 'value' ,
104+ name : '次' ,
105+ nameGap : 6 ,
106+ splitLine : {
107+ show : false
108+ }
109+ }
110+ ] ,
111+ series : [
112+ {
113+ name : '在线人数' ,
114+ type : 'line' ,
115+ color : '#0EDF99' ,
116+ smooth : true ,
117+ showSymbol : false ,
118+ areaStyle : {
119+ color : {
120+ type : 'linear' ,
121+ x : 0 ,
122+ y : 0 ,
123+ x2 : 0 ,
124+ y2 : 1 ,
125+ colorStops : [ {
126+ offset : 0 , color : 'rgb(66,255,251,1)' // 0% 处的颜色
127+ } , {
128+ offset : 1 , color : 'rgb(66,255,251,0)' // 100% 处的颜色
129+ } ] ,
130+ global : false // 缺省为 false
131+ }
132+ } ,
133+ data : dataUser
134+ } ,
135+ {
136+ name : '访问次数' ,
137+ type : 'line' ,
138+ color : '#42FFFB' ,
139+ smooth : true ,
140+ showSymbol : false ,
141+ yAxisIndex : 1 ,
142+ areaStyle : {
143+ color : {
144+ type : 'linear' ,
145+ x : 0 ,
146+ y : 0 ,
147+ x2 : 0 ,
148+ y2 : 1 ,
149+ colorStops : [ {
150+ offset : 0 , color : 'rgb(10,195,248,1)' // 0% 处的颜色
151+ } , {
152+ offset : 1 , color : 'rgb(10,195,248,0)' // 100% 处的颜色
153+ } ] ,
154+ global : false // 缺省为 false
155+ }
156+ } ,
157+ data : dataCount
158+ }
159+ ]
160+ } ;
161+
162+ let startNum = 0 ;
163+ let endNum = 40 ;
164+
165+ setInterval ( function ( ) {
166+ startNum = startNum + 0.1 ;
167+ endNum = endNum + 0.1 ;
168+ if ( endNum >= 100 ) {
169+ startNum = 0 ;
170+ endNum = 40 ;
171+ }
172+ myChart . dispatchAction ( {
173+ type : 'dataZoom' ,
174+ // 开始位置的百分比，0 - 100
175+ start : startNum ,
176+ // 结束位置的百分比，0 - 100
177+ end : endNum
178+ } ) ;
179+ } , 200 ) ;
180+ </ script >
181+ </ html >
0 commit comments