为echarts图表添加全局加载动画函数和自适应效果

全局加载动画函数：

//showLoading做成循环，使用时可以写成数组形式批量添加，否则只能添加单个图表
Vue.prototype.showLoading = function showLoading(chart) {
  for (let i of chart){
    i.showLoading({
      text: '',
      color: '#5CADEE',
      textColor: '#fff',
      maskColor: 'transparent',
      zlevel: 0
    });
  }
};

Vue.prototype.hideLoading = function hideLoading(chart) {
  chart.hideLoading({
    text: '',
    color: '#5CADEE',
    textColor: '#fff',
    maskColor: 'transparent',
    zlevel: 0
  });
};

//调用方式示例：                
this.showLoading([this.chart1, this.chart2, this.chart3, this.chart4, this.chart5])
this.hideLoading(this.chart1)

图表随屏幕变化自适应：

window.addEventListener('resize', () => {
                this.chart1.resize();
                this.chart2.resize();
                this.chart3.resize();
                this.chart4.resize();
                this.chart5.resize();
                this.chart6.resize();
                this.map.resize();
            }, {passive: true}) //是否取消阻止默认行为(preventDefault()) 
           

初始化echarts：

this.chart1 = this.$echarts.init(this.$refs.chart1)
this.chart1.setOption(option)