为echart图表添加 加载动画和自适应效果

加载动画：

//showLoading做成循环，使用时可以写成数组形式批量添加，否则只能添加单个图表
//例如：                
this.showLoading([this.chart1, this.chart2, this.chart3, this.chart4, this.chart5])
this.hideLoading(this.chart1)


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
  });
};

图表随屏幕变化自适应大小：

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()) 
           

初始化echart:

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