html图表数据呈现,websocket+Echarts实时图表数据展示

WebSocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

为什么需要WebSocket ?

初次接触 WebSocket的人，都会问同样的问题: 我们已经有了HTTP协议，为什么还需要另-一个协议?它能带来什么好处?

答案很简单，因为HTTP协议有一个缺陷:通信只能由客户端发起。

举例来说， 我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主I动向客户端推送信息。

效果图

image.png

实时数据有两种方式:

1.定时器:由前端做，发送请求次数多，耗性能

echart_demo.html 代码如下(head标签引入的 echarts.min.js 需从echart官网(https://echarts.apache.org/zh/builder.html)下载到与echart_demo.html 同级目录)

websocket+Echarts实时图表数据展示

echart_demo.js 代码如下

window.onload = function () {

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

title: {