echarts系列：echarts增加loading

背景

最近在大屏项目研发时，存在多个echarts图表，有些接口获取数据较慢，需要加loading样式；

解决方案

翻阅api，找到showLoading可进行设置

参考： 加载动画效果

显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 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'
}

代码部分

		  const myChart = this.$echarts.init(chart)
          myChart.showLoading({
            text: 'loading',
            color: 'rgba(20, 149, 247, 0.7)',	//设置加载颜色
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.2)',
            zlevel: 0
          })

		  setTimeout(() => {
            // setOption前隐藏loading事件
            myChart.hideLoading()
            
            myChart.setOption(option, true)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
            this.$on('hook:destroyed', () => {
              window.removeEventListener('resize', function () {
                myChart.resize()
              })
            })
          }, 1000)

实现效果