[随笔] echarts 图表数据实现计时自动刷新
[随笔] echarts 图表数据实现计时自动刷新
参考：https://blog.csdn.net/qq_43750501/article/details/108204262
首先我的 echarts 各个模块图表是用组件抽出来写的，在各个子组件中编写绘制各个图表。
父组件中:
父组件向子组件传递参数— 刷新时限 ，每个子组件刷新时间可以不一样
<ConnectData class="chart1" :refreshTime="60000" /><TaskData class="chart2" :refreshTime="61000" />子组件中:
在
prop获取传递来的刷新时限在
data()中定义一个计时器变量props: { // msg: String refreshTime: null},data() { return { timer: null, }}在钩子函数
mounted()中进行绘图与刷新操作mounted() { let that = this; // 初始化 that.initDatas(); // 调用计时器，定时刷新图表 that.timer = setInterval(() => { that.initDatas(); }, that.refreshTime);},在页面销毁前 清除计时器
beforeDestroy() { // 销毁前清除计时器 clearInterval(this.timer);},initDatas
// 先获取数据，再调用绘图方法，可将绘图方法封装initDatas() { let that = this; let obj = { "branchCN": "xxx", "linetype": "" }; // 调用请求数据方法 queryWorkStaff(obj).then((resp) => { // console.log(resp.data); if(resp.data.Code == '200') { let result = resp.data.Result; // 获取接口数据... let totalPersonCount = result.totalPersonCount; // 总人数 // ... // 处理数据 // ... // 重置页面数据 that.dataSource.staffNums.staff_outAll = totalOutPeopleCount; // 总人数 // ... // 绘图 that.drawChart(); } else { alert('数据获取失败，无法刷新！'); console.log(err); clearInterval(that.timer); // 获取失败，清除计时器 } }).catch((err) => { alert('数据获取失败，无法刷新！'); console.log(err); clearInterval(that.timer); // 获取失败，清除计时器 });},在绘图方法中：
drawChart() {// 基于准备好的容器，初始化 echarts 实例let myChart = echarts.init(document.getElementById('carChart'), 'dark');// 具体配置省略...// ...// 添加以下语句可让图表重新绘制，展现动画效果。（myChart为初始化的图表对象）myChart.clear();// 使用上面定义的配置项 option 来配置图表myChart.setOption(option);}
赞 (0)