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
| <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>ECharts 数据实时监控</title> <script src="/static/js/jquery-3.2.1.min.js"></script> <script src="/static/js/echarts.js"></script> </head> <body> <div style=""> <h2 style="text-align: center;">数据实时监控 Demo</h2> </div> <div style="width: 1000px;height:500px; margin: auto;padding-top: 30px;"> <div id="img_1" style="width: 500px;height:450px;float: left;"></div> <div id="img_2" style="width: 500px;height:450px;float: left;"></div> </div> <script> var maxId1 = 0; var maxId2 = 0; var data1 = []; var date1 = []; var data2 = []; var date2 = []; var myChart1 = echarts.init(document.getElementById('img_1')); var myChart2 = echarts.init(document.getElementById('img_2')); myChart1.setOption({ title: { text: '数据实时监控1' }, tooltip: {}, legend: { data: ['数据1'] }, xAxis: { data: date1, axisLabel: { rotate: 45 } }, yAxis: {}, series: [{ name: '数据1', type: 'line', data: data1 }] }); myChart2.setOption({ title: { text: '数据实时监控2' }, tooltip: {}, legend: { data: ['数据2'] }, xAxis: { data: date2, axisLabel: { rotate: 45 } }, yAxis: {}, series: [{ name: '数据2', type: 'line', data: data2 }] }); setInterval(function () { $.getJSON("/get_data/", {tableName: 'data1', maxId: maxId1}, function (data) { {#如果有新数据#} if (data.maxId > maxId1) { maxId1 = data.maxId; data1 = data1.concat(data.data); date1 = date1.concat(data.date); myChart1.setOption({ xAxis: { data: date1 }, series: [{ // 根据名字对应到相应的系列 name: '数据1', data: data1 }] }); } }); $.getJSON("/get_data/", {tableName: 'data2', maxId: maxId2}, function (data) { if (data.maxId > maxId2) { maxId2 = data.maxId; data2 = data2.concat(data.data); date2 = date2.concat(data.date); myChart2.setOption({ xAxis: { data: date2 }, series: [{ // 根据名字对应到相应的系列 name: '数据2', data: data2 }] }); } }); }, 1000); </script> </body> </html>
|