在你的大屏项目中怎么让图表实时的更新 |
您所在的位置：网站首页 › 可视化logo电商数据大屏怎么做出来的 › 在你的大屏项目中怎么让图表实时的更新 |
|
让图表实时的更新，有两种解决方案 第一种：使用事件轮训 利用setInterval()轮训调用接口数据，然后需要注意的是需要数据更新完，要刷新组件使用轮训的缺点：浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源 第二种：使用webSocket长连接 WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 import heraers from '../components/hearder.vue' import panel from '../components/panel.vue' import cen from '../components/cen.vue' import { onMounted, reactive, ref } from 'vue'; //子组件用来绑定得key值 const keys = ref(null) //在生命周期函数里调用WebSocket方法 onMounted(() => { GetSocket() }) //要传给子组件的数据 const jiuyeoption = reactive({ color: ['#2f89cf'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '0%', top: '10px', right: '0%', bottom: '4%', containLabel: true }, xAxis: [ { type: 'category', data: ['IT', '就业', '工作', '游戏', '电商', '邮政', '顺丰'], axisTick: { alignWithLabel: true }, axisLabel: { color: 'rgba(255,255,255,.6)', fontSize: '12' }, axisLine: { show: false } } ], yAxis: [ { type: 'value', axisLabel: { color: 'rgba(255,255,255,.6)', fontSize: '12' }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' // width: 1, // type: "solid" } }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } } } ], series: [ { name: '直接访问', type: 'bar', // 修改柱子宽度 barWidth: '35%', data: [10, 52, 200, 334, 390, 330, 220], itemStyle: { // 修改柱子圆角 barBorderRadius: 5 } } ] } ) //把WebSocket链接 写在一个方法里 const GetSocket = () => { //实例化一个webSocket let socket: any = new WebSocket('ws://127.0.0.1:8000') //链接服务器就会触发 socket.onopen = () => { //向服务器发送一条消息 socket.send('服务端连接成功') } //服务器返回消息就会触发 onmessage事件 这个e就是服务器返回的数据 socket.onmessage = (e: any) => { //把服务器返回的数据重新赋值 jiuyeoption.series[0].data = JSON.parse(e.data) //在重新给keys一个值 防止父组件数据发生变化 子组件数据不更新 keys.value = new Date() } }webSocket有四个事件 onopen 服务器被连接就会触发onopen事件onerror 连接错误时候就会触发这个事件onmessage 当消息被接受会触发消息事件onclose 连接关闭的时候就会触发这个事件webSocket有两个方法 send()发送数据 一定要在连接后close()关闭连接webSocket优缺点 优点： 相对于http/https效率高，自动更新服务端数据无需页面刷新，耗费资源少，速度快。 缺点： 多条数据传输都依赖一条websocket连接，要保证连接的稳定性、错误处理、心跳机制的稳定性；对前后端尤其是后端开发同学要求更高，需要理清发送消息的时间，发送的事件及数据，也要保证ws的稳定性。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |