背景

最近在大屏项目研发时，存在多个echarts图表，有些接口获取数据较慢，需要加loading样式；

解决方案

翻阅api，找到showLoading可进行设置

参考： 加载动画效果

显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。

参数：
type
可选，加载动画类型，目前只有一种’default’

opts
可选，加载动画配置项，跟type有关，下面是默认配置项：

default: {text: 'loading',color: '#c23531',textColor: '#000',maskColor: 'rgba(255, 255, 255, 0.8)',zlevel: 0,// 字体大小。从 `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'
}

代码部分

		  const myChart = this.$echarts.init(chart)myChart.showLoading({text: 'loading',color: 'rgba(20, 149, 247, 0.7)',	//设置加载颜色textColor: '#000',maskColor: 'rgba(255, 255, 255, 0.2)',zlevel: 0})setTimeout(() => {// setOption前隐藏loading事件myChart.hideLoading()myChart.setOption(option, true)window.addEventListener('resize', function () {myChart.resize()})this.$on('hook:destroyed', () => {window.removeEventListener('resize', function () {myChart.resize()})})}, 1000)

实现效果