需要开发echarts中的loading加载中效果，我们可以使用到echart自带showLoading()方法。
在需要加载数据的地方使用showLoadin()方法显示loading加载中效果，数据加载完成后再调用hideLoading()方法，隐藏loading加载中效果。
官方文档
官方文档地址：https://echarts.apache.org/zh/api.html#echartsInstance.showLoading
显示加载动画效果：
echartsInstance. showLoading Function
可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 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'
}隐藏动画加载效果：
echartsInstance. hideLoadingFunction
完整示例代码：
import echarts from 'echarts';
const mycharts = echarts.init(document.getElementById('echart'))；
// 调用showLoading方法
mycharts.showLoading({
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
});;
setTimeout(() => {
// setOption前隐藏loading事件
mycharts.hideLoading();
mycharts.setOption(option);
}, 1000);
const option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};