在你的大屏项目中怎么让图表实时的更新

让图表实时的更新，有两种解决方案

       第一种：使用事件轮训

利用setInterval()轮训调用接口数据，然后需要注意的是需要数据更新完，要刷新组件使用轮训的缺点：浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源

      第二种：使用webSocket长连接

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

<script setup lang="ts">
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()
    }
}
</script>

        webSocket有四个事件

1. onopen   服务器被连接就会触发onopen事件
2. onerror  连接错误时候就会触发这个事件
3. onmessage 当消息被接受会触发消息事件
4. onclose 连接关闭的时候就会触发这个事件

        webSocket有两个方法

1. send()发送数据 一定要在连接后
2. close()关闭连接

          webSocket优缺点

优点：

相对于http/https效率高，自动更新服务端数据无需页面刷新，耗费资源少，速度快。

缺点：

多条数据传输都依赖一条websocket连接，要保证连接的稳定性、错误处理、心跳机制的稳定性；对前后端尤其是后端开发同学要求更高，需要理清发送消息的时间，发送的事件及数据，也要保证ws的稳定性。