Echarts实现折线图随时刻动态加载
来源：互联网 发布：大连知润 编辑：程序博客网 时间：2024/06/04 19:39
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网络流量使用情况</title> <link rel="stylesheet" href="__PUBLIC__/admin/netFlow/css/pagination.css"> <link rel="stylesheet" href="__PUBLIC__/admin/netFlow/css/network.css"> <script src="__PUBLIC__/admin/netFlow/js/jquery-1.11.1.min.js"></script> <script src="__PUBLIC__/admin/netFlow/js/jquery.pagination.js"></script> <script src="__PUBLIC__/admin/netFlow/js/echarts.js"></script></head><body><div class="index"> <!--头部--> <div class="head"> <b></b> <ul> <li class="user"> <a href=""><img src="__PUBLIC__/admin/userTest/img/user.jpg" alt="" id="userImage" />{$u.username}</a> </li> <li class="set"> <b></b> <a href="/index.php/admin/index/bounties">个人设置</a> </li> <li class="quit"> <b></b> <a href="/index.php/admin/Index/logout">退出</a> </li> <li class="back"> <!--<a href="#">返回</a>--> <input type="button" onclick='window.location.href = "/index.php/admin/index/bounties";' value="返回"> </li> </ul> </div> <!--主体--> <div class="content"> <div class="left"> <ul class="tabs"> <li>白帽子用户分布情况</li> <a href="/index.php/admin/Index/userVps"><li>聚测VPS总体资源使用状态</li></a> <li>漏洞发现的汇总情况</li> <a href="/index.php/admin/Index/userTest"><li>安全测试项目</li></a> <li>测试项目中的VPS运行情况</li> <li>聚测项目中的用户上线情况</li> <li class="selected" class="selected">网络流量使用情况</li> <li>VPS监控信息</li> </ul> <b></b> </div> <div class="right"> <div class="item"> <div class="title"> <volist name="list" id="vo" offset="0" length='8'> <b class="pro" id={$vo.p_id}>{$vo.p_title}</b> </volist> </div> <div class="plot"> <foreach name="res" item="r" > <div class="log log1"> <i class="i1"></i> <i class="i2"></i> <div class="net_title">{$r.name}</div> <div class="event_log" id="{$r.id}"> </div> <i class="i3"></i> <i class="i4"></i> </div> </foreach> </div> <!--分页--> <div id="Pagination" class="pagination"></div> </div> </div> </div></div></body><script> // 图表 function figure(id) { var myChart = echarts.init(document.getElementById(id)); myChart.showLoading({ text : '数据获取中', effect: 'whirling' }); option = { tooltip : { trigger: 'axis', position: function(pt) { return [pt[0], '10%']; } }, legend: { data: [{ name: '流入', textStyle: { color: '#fff' } }, { name: '流出', textStyle: { color: '#fff' } }], right: '15%', itemWidth: 14 }, toolbox: { show : true, }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, 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; })(), axisLine: { lineStyle: { color: '#fff', width: 2 } }, }, { type: 'category', boundaryGap: true, data: (function (){ var res = []; var len = 10; while (len--) { res.push(len + 1); } return res; })() } ], yAxis : [ { type : 'value', axisLine: { lineStyle: { color: '#fff', width: 2 } }, }, { type : 'value', axisLine: { lineStyle: { color: '#fff', width: 2 } }, } ], series : [ { name: '流入', type: 'line', smooth: true, symbol: 'none', sampling: 'average', itemStyle: { normal: { // 折线颜色 color: '#21adae' } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, // color: '#0f2a44' }, { offset: 1, // color: '#21adae' }]) } }, data:(function (){ var res = []; var len = 10; while (len--) { res.push(Math.round(Math.random() * 10)); } return res; })() }, { name: '流出', type: 'line', smooth: true, symbol: 'none', sampling: 'average', itemStyle: { normal: { // 折线颜色 color: '#97b14a' } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, // color: '#0f2a44' }, { offset: 1, // color: '#97b14a' }]) } }, data:(function (){ var res = []; var len = 0; while (len <10) { res.push((Math.random()*10 + 5).toFixed(1) - 0); len++; } return res; })() } ] }; var count = 11; var axisData; setInterval(function (){ axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,''); var data0 = option.series[0].data; var data1 = option.series[1].data; $.post("__URL__/vpsNet",{id:id},function(data){ var data=eval("("+data+")"); var netin=data.netin; var netout=data.netout; data0.shift(); data0.push(netin); data1.shift(); data1.push(netout); }) option.xAxis[0].data.shift(); option.xAxis[0].data.push(axisData); option.xAxis[1].data.shift(); option.xAxis[1].data.push(count++); myChart.hideLoading(); myChart.setOption(option); }, 500); } var lid = $(".event_log"); for (var i = 0; i < lid.length; i++) { var id = lid.eq(i).attr("id");//获取vps表id figure(id); } /*分页*/ var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function() { Init(0); //注意参数，初始页面默认传到后台的参数，第一页是0; $("#Pagination").pagination(total, { //total不能少 callback: PageCallback, prev_text: '上一页', next_text: '下一页', items_per_page: pageSize, num_display_entries: 4, //连续分页主体部分显示的分页条目数 num_edge_entries: 1, //两侧显示的首尾分页的条目数 }); function PageCallback(index, jq) { //前一个表示您当前点击的那个分页的页数索引值，后一个参数表示装载容器。 Init(index); } }); function Init(pageIndex){ //这个参数就是点击的那个分页的页数索引值，第一页为0，上面提到了，下面这部分就是AJAX传值了。 }; /*tab标签切换*/ /* $('.tabs li').click(function(){ var i = $(this).index(); $(this).addClass('selected').siblings().removeClass('selected'); $('.right .item').eq(i).show().siblings().hide(); })*/ $('.title b').click(function(){ var i = $(this).index(); $(this).addClass('checked').siblings().removeClass('checked');// $('.plot').eq(i).show().siblings().hide(); }) //点击展开收缩 $(".left>b").click(function(){ if($(this).hasClass('out')){ $(".tabs").show(); $(this).removeClass("out"); $('.plot').css({"width":"1524px","margin-left":"10px"}); $('.log').css('width','740px'); $('.event_log').css('width','722px'); $('.title').css('margin-left','10px'); }else{ $(".tabs").hide(); $(this).addClass("out"); $('.plot').css({"width":"1824px","margin-left":"60px"}); $('.log').css('width','820px'); $('.event_log').css('width','808px'); $('.title').css('margin-left','60px'); } }); /*去掉火狐全屏出现的滚动条*/ BrowserType(); //判断当前浏览类型 function BrowserType() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 //var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器 if (isFF) { var times = true; window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window.event; if (evt.keyCode) { if(evt.keyCode == 122){ times = !times if(times){ $("body").eq(0).css('overflow','auto'); }else{ /*取消滚动条*/ $("body").eq(0).css('overflow','hidden'); } } } } } }</script><script> $(".pro").click(function () { var p_id=$(this).attr("id"); location.href = "/index.php/admin/Index/netFlow?p_id=" + p_id; })</script></html>
阅读全文
0 0
- Echarts实现折线图随时刻动态加载
- echarts动态加载折线图数据demo
- echarts动态加载折线图数据demo
- 使用echarts实现动态显示折线图
- echarts折线图,使用ajax动态加载数据
- echarts动态绘制折线图
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
- echarts初始化怎么加载两个折线图
- 使用echarts动态设置多重折线图
- 获取动态数据到echarts-折线图
- echarts jsp实时更新动态折线图
- Echarts动态加载折线图X Y轴数据图表数据
- Echarts折线图
- echarts折线图
- echarts-折线图
- echarts折线图
- echarts绘制折线图
- 如何在MySQL中设置外键约束
- Skynet服务器框架（十） CentOS 防火墙设置
- nginx 配置
- CodeForces
- C语言基础
- Echarts实现折线图随时刻动态加载
- leetcode--Permutations
- mac安装thrift-0.9.1
- linux之sed用法
- .Net学习框架
- Python 字符串转python json.decoder.JSONDecodeError
- git roll back the previous version
- HBase 0.98增删改查java代码实现
- lintcode刷题——整数转罗马数字
