echarts增加loading加载中效果方法

需要开发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:'搜索引擎'}
            ]
        }
    ]
};