一、前言

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

演示Demo：

// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('top'))
myChart.showLoading({
    text: '数据加载中...',
    color: '#c23531',
    textColor: '#ffffc2',
    maskColor: 'rgba(255, 255, 255, 0)',
    zlevel: 0
});

setTimeout(() => {
  // setOption前隐藏loading事件 
  mycharts.hideLoading();
  mycharts.setOption(option);
}, 1000);

mycharts.setOption(option);

window.addEventListener("resize", function () {
    myChart.resize();
});

通过在echarts.js中通过查找version，得到所用版本为version: '3.6.2'，在官方2.0版本API中，找到一些可配置选项：

三、拓展阅读

• ECharts3.0官方文档
• ECharts2.0官方文档