echarts加载动态数据---实时统计

实时统计

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<jsp:include page="/WEB-INF/view/common/header.jsp" flush="true" />


<script type="text/javascript" charset="utf-8" src="/resources/echarts/esl.js"></script>







<div id="drawEcharts" style="height:400px;"></div>



  <script type="text/javascript">  
            // 路径配置  
            require.config({  
                paths:{   
                    'echarts' : '/resources/echarts/echarts',  
                    'echarts/chart/bar' : '/resources/echarts/echarts'  
                }  
            });  
              
            // 使用  
            require(  
                [  
                    'echarts',  
                    'echarts/chart/bar' // 使用折线图就加载bar模块，按需加载  
                ],  
                function (ec) {  
                    // 基于准备好的dom，初始化echarts图表  
                    var myChart = ec.init(document.getElementById('drawEcharts'));   
                      
                    var jsonNum=[13,12,12,15,20,18,8];
					 var jsonTime=[71,71,70.21,94,11,11,42];
					 var jsonDay=["1月23日","1月24日","1月25日","1月26日","1月27日","1月28日","1月29日"];
                      
					 option = {
							    title : {
							        text: '在线直播人数',
							        subtext: ''
							    },
							    tooltip : {
							        trigger: 'axis'
							    },
							    legend: {
							        data:['在线人数', '预购队列']
							    },

							    dataZoom : {
							        show : false,
							        start : 0,
							        end : 100
							    },
							    xAxis : [
							        {
							            type : 'category',
							            boundaryGap : true,
							            data : (function (){
							                var now = new Date();
							                var res = [];
							                var len = 10;
							                while (len--) {
							                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
							                    now = new Date(now - 2000);
							                }
							                return res;
							            })()
							        },
							        {
							            type : 'category',
							            boundaryGap : true,
							            data : (function (){
							                var res = [];
							                var len = 10;
							                while (len--) {
							                    res.push(len + 1);
							                }
							                return res;
							            })()
							        }
							    ],
							    yAxis : [
							        {
							            type : 'value',
							            scale: true,
							            name : '价格',
							            boundaryGap: [0.2, 0.2]
							        },
							        {
							            type : 'value',
							            scale: true,
							            name : '预购量',
							            boundaryGap: [0.2, 0.2]
							        }
							    ],
							    series : [
							        {
							            name:'预购队列',
							            type:'bar',
							            xAxisIndex: 1,
							            yAxisIndex: 1,
							            data:(function (){
							                var res = [];
							                var len = 10;
							                while (len--) {
							                    res.push(Math.round(Math.random() * 1000));
							                }
							                return res;
							            })()
							        },
							        {
							            name:'在线人数',
							            type:'line',
							            data:(function (){
							                var res = [];
							                var len = 10;
							                while (len--) {
							                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
							                }
							                return res;
							            })()
							        }
							    ]
							};
							var lastData = 11;
							var axisData;
							clearInterval(timeTicket);
							timeTicket = setInterval(function (){
							    lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
							    lastData = lastData.toFixed(1) - 0;
							    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
							    
							    // 动态数据接口 addData
							    myChart.addData([
							        [
							            0,        // 系列索引
							            Math.round(Math.random() * 1000), // 新增数据
							            true,     // 新增数据是否从队列头部插入
							            false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
							        ],
							        [
							            1,        // 系列索引
							            lastData, // 新增数据
							            false,    // 新增数据是否从队列头部插入
							            false,    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
							            axisData  // 坐标轴标签
							        ]
							    ]);
							}, 2000);
							                    
              
                    // 为echarts对象加载数据   
                    myChart.setOption(option);   
                }  
            );  
        
  </script> 

<script type="text/javascript">var timeTicket;</script>

<jsp:include page="/WEB-INF/view/common/footer.jsp" flush="true" />