在Echarts中，为了有友好的用户体验，加载大量数据时，需要用到Loading动画效果，具体的组件就是：echartsInstance. showLoading和echartsInstance. hideLoading，且必须成对使用。
一，组件语法
echartsInstance. showLoading (type?: string, opts?: Object)
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 }
演示应用：
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);
hideLoading，直接调用即可。
二、使用位置：
// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('map')); //showLoading遮盖层显示 myChart.showLoading(); var option ={}
// setOption前隐藏loading事件 mycharts.hideLoading(); mycharts.setOption(option);
Done！
