Echarts实例中echartsInstance. showLoading和hideLoading

在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！