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

来源：互联网发布：surface rt ubuntu 编辑：程序博客网时间：2024/06/05 03:45
实时统计
<%@ 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" />
1 0