能源数据动态数据-socketAPI

```javascript var myChart = echarts.init(document.getElementById('main'),'dark'); myChart.setOption({ title: { text: '能源' }, tooltip: {}, legend: { data:['cpu'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: 'cpu', type: 'line', data: [] }] }); var time = ["","","","","","","","","",""], cpu = [0,0,0,0,0,0,0,0,0,0]; mem = [0,0,0,0,0,0,0,0,0,0]; //准备好统一的 callback 函数 var update_mychart = function (echart,res,cpu) { echart.hideLoading(); time.push(res.data[0]); cpu.push(parseFloat(res.data[1])); if (time.length >= 10){ time.shift(); cpu.shift(); } echart.setOption({ xAxis: { data: time }, series: [{ name: 'cpu', // 根据名字对应到相应的系列 data: cpu }] }); }; // 首次显示加载动画 myChart.showLoading(); var socket = null; // 建立socket连接，等待服务器“推送”数据，用回调函数更新图表 $(document).ready(function() { namespace = '/energy_record_data'; socket = io.connect('http://192.168.10.79:5000'+namespace); socket.on('server_response', function(res) { console.log(res); update_mychart(myChart,res,cpu); }); }); function dis(params) { socket.disconnect(); alert("已断开连接") } function conn(params) { socket.connect(); alert("恢复连接") } ``` **效果展示** ![QQ图片20210531103427.png](https://cos.easydoc.net/69307843/files/kpc016o4.png)

能源数据动态数据-socketAPI

能源数据动态数据-socketAPI

接口描述

响应参数

参数名

类型

描述

必填

前端使用说明 / 示例

能源数据动态数据-socketAPI

接口描述

响应参数

参数名

类型

描述

必填

前端使用 说明 / 示例

前端使用说明 / 示例