Echarts的响应式布局

echarts中的响应式布局。

• 单个图层

  var myChart = this.$echarts.init(this.$refs.depActive)//获取到dom
  myChart.setOption(this.depActive_option)//渲染dom
   // 窗口自适应
  window.onresize = function() {
  	myChart.resize();
  }
  
  //但是这种方法只能对一个图层有用，如果同时对多个图层设置的话，只对最后一个图层有用。考虑到在Vue中，通常会把多个图层切割成不同的模块，所以这种方法并不适用。
  

• 通用方法

  // 挂载resize方法
  Vue.prototype.$echartsResize = function (ref) {
    window.addEventListener("resize",function(){
      ref.resize()
    })
  }
  

  //在所有的组件中都可以直接使用this.$echartsResize()
  this.$echartsResize(myChart)//就这么简单