vue3中Echarts异步数据的加载与动态更新

2024-07-11 00:13| 来源: 网络整理| 查看: 265

我们使用echarts图表的时候，数据是在初始化后直接在setOption中配置的，但是很多时候我们需要的数据可能是需要发请求异步获取到数据后再去渲染图表数据，也就是数据的动态更新问题。

写配置项的时候会有多种方法，因为当请求拿到数据之后我还要再次渲染数据，更新配置项，所以这里可以把配置项单独封装为一个函数，使用的时候再去调用。

//先声明一个myChart let myChart; //配置项函数 const chartOption = (data) => myChart.setOption({ //里面写你需要的配置项信息 }); //当挂载的时候去初始化图表 onMounted(() => { myChart = echarts.init(document.getElementById('main')); //调用配置项，传入变量名 chartOption(cpudata.value) //echarts响应式 proxy.$echartsResize(myChart) })

此时我们需要间隔一段时间去发请求拿数据进行动态渲染，一般会想到用定时器setInterval或setTimeout，如果我们的操作是同步代码，那么使用setInterval是没有问题的，但是在setInterval中我们无法得知上一次请求是否已经完毕，而且在多次请求的时候容易发生堵塞，结果就是上一次请求还未结束，下一次请求又开始了，导致上一次请求被取消，而且控制台还会报错，所以setTimeout会更好一些。但是我们要怎么用呢？这里我参考了一篇文章，就是使用轮询的方式去定时请求数据。

vue轮询解决方案 - 掘金 (juejin.cn)

所以我们可以简单封装一个轮询的方法，这里根据自己的需求去做调整：

import { Ref } from 'vue' export function polling( //发请求的接口函数 fun: Function, //需要动态更新的数据变量 params: Ref, //调用echarts配置项 chartOption: Function, ) { fun().then((res: { data: Ref }) => { let timer = setTimeout(() => { clearTimeout(timer) //拿到请求回来的数据传给echarts图表的配置项函数 params = res.data chartOption(params) polling(fun, params, chartOption) }, 3000) }) }

然后引入到我们需要的页面组件中，传入相关参数进行动态渲染数据。

完整代码：

import { onMounted, ref } from '@vue/runtime-core'; import { getCurrentInstance } from 'vue' import { ReqCpuInfo } from '../../../http/request' import * as echarts from 'echarts'; const { proxy } = getCurrentInstance(); //引入封装的轮询函数 import { polling } from '../../../utils/polling' let myChart; const chartOption = (data) => myChart.setOption({ //写相关配置项 }); // 调用轮询进行定时拿数据 let cpudata = ref(0) polling(ReqCpuInfo, cpudata.value, chartOption) onMounted(() => { myChart = echarts.init(document.getElementById('main')); chartOption(cpudata.value) //echarts响应式 proxy.$echartsResize(myChart) })

【本文地址】

公司简介

联系我们