axios vue 加载效果动画_在vue中通过axios异步使用echarts的方法

二. 添加加载动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

在drawLine()方法中添加showLoading()和hideLoading(),代码如下:

this.$http.get("./static/dat.json").then((res) => {

setTimeout(() => { //未来让加载动画效果明显,这里加入了setTimeout,实现3s延时

const data = res.data;

const list = data.series.map(good => {

let list = good.data;

return [...list]

})

console.log(list);

console.log(Array.from(...list));

myChart.hideLoading(); //隐藏加载动画

myChart.setOption({

title: data.title,20]

}]

});

},3000)

})

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。