index.ejs 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title><%= title %></title>
  5. <link rel='stylesheet' href='/stylesheets/style.css' />
  6. <script src="/javascripts/echarts.min.js"></script>
  7. <script src="/javascripts/jquery-3.4.1.min.js"></script>
  8. <script src="/socket.io/socket.io.js"></script>
  9. <script type="text/javascript">
  10. var g_chart = false;
  11. var g_dataLineChart = false;
  12. $(window).resize(()=>{
  13. if(g_dataLineChart)
  14. {
  15. refreshChart(g_dataLineChart);
  16. }
  17. });
  18. $(document).ready(()=>{
  19. var client = io("");
  20. client.on('connect', ()=>{
  21. client.emit('reloadLineChart');
  22. client.on('OnReloadLineChar', dataLineChart=>{
  23. g_dataLineChart = dataLineChart;
  24. refreshChart(dataLineChart);
  25. });
  26. client.on('onUpdateLineChart', dataLineChart=>{
  27. g_dataLineChart = dataLineChart;
  28. refreshChart(dataLineChart);
  29. });
  30. });
  31. });
  32. function refreshChart(dataLineChart){
  33. //$("#main").html(`<span>${dataLineChart}</span>`);
  34. // 基于准备好的dom,初始化echarts实例
  35. if(g_chart)
  36. {
  37. g_chart.dispose();
  38. }
  39. var chartDom = document.getElementById('main');
  40. var myChart = echarts.init(chartDom);
  41. g_chart = myChart;
  42. dataLineChart && myChart.setOption(dataLineChart);
  43. }
  44. </script>
  45. <style>
  46. *{
  47. margin: 0;
  48. padding: 0;
  49. }
  50. html,body{
  51. width: 100%;
  52. height: 100%;
  53. padding: 0;
  54. }
  55. div{
  56. width:100%;
  57. height: 100%;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div id="main" class="box"></div>
  63. </body>
  64. </html>