1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- <!DOCTYPE html>
- <html>
- <head>
- <title><%= title %></title>
- <link rel='stylesheet' href='/stylesheets/style.css' />
- <script src="/javascripts/echarts.min.js"></script>
- <script src="/javascripts/jquery-3.4.1.min.js"></script>
- <script src="/socket.io/socket.io.js"></script>
- <script type="text/javascript">
- var g_chart = false;
- var g_dataLineChart = false;
- $(window).resize(()=>{
- if(g_dataLineChart)
- {
- refreshChart(g_dataLineChart);
- }
- });
- $(document).ready(()=>{
- var client = io("");
- client.on('connect', ()=>{
- client.emit('reloadLineChart');
- client.on('OnReloadLineChar', dataLineChart=>{
- g_dataLineChart = dataLineChart;
- refreshChart(dataLineChart);
- });
- client.on('onUpdateLineChart', dataLineChart=>{
- g_dataLineChart = dataLineChart;
- refreshChart(dataLineChart);
- });
- });
- });
- function refreshChart(dataLineChart){
- //$("#main").html(`<span>${dataLineChart}</span>`);
- // 基于准备好的dom,初始化echarts实例
-
- if(g_chart)
- {
- g_chart.dispose();
- }
-
- var chartDom = document.getElementById('main');
- var myChart = echarts.init(chartDom);
- g_chart = myChart;
-
- dataLineChart && myChart.setOption(dataLineChart);
- }
- </script>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- html,body{
- width: 100%;
- height: 100%;
- padding: 0;
- }
- div{
- width:100%;
- height: 100%;
- }
- </style>
- </head>
- <body>
- <div id="main" class="box"></div>
- </body>
- </html>
|