最近有个vue项目开发时要求Echarts在请求接口前需要有个加载动画,请求完数据后隐藏动画,于是收集了一下代码
显示加载动画
chart.showLoading() //显示加载动画,默认样式
隐藏加载动画
myChart.showLoading({
text: 'loading', //显示的文本
color: '#c23531', //显示转圈的圆圈颜色
textCloor: '#000', //显示文本的颜色
maskColor: 'rgba(255,255,255,0.8)',
// 字体大小。从 `v4.8.0` 开始支持。
fontSize: 12,
// 是否显示旋转动画(spinner)。从 `v4.8.0` 开始支持。
showSpinner: true,
// 旋转动画(spinner)的半径。从 `v4.8.0` 开始支持。
spinnerRadius: 10,
// 旋转动画(spinner)的线宽。从 `v4.8.0` 开始支持。
lineWidth: 5,
// 字体粗细。从 `v5.0.1` 开始支持。
fontWeight: 'normal',
// 字体风格。从 `v5.0.1` 开始支持。
fontStyle: 'normal',
// 字体系列。从 `v5.0.1` 开始支持。
fontFamily: 'sans-serif'
})
隐藏加载动画
chart.hideLoading() //隐藏加载动画