欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。
需要开发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:'搜索引擎'} ] } ]};
