Vue中使echarts图表自适应

Vue中使echarts图表自适应

1、先在main.js中自定义一个全局指令，如下

// 定义全局指令
Vue.directive('resize', { // 使用局部注册指令的方式
  // 指令的名称
  bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
    let width = '',
      height = '';

    function isReize() {
      const style = document.defaultView.getComputedStyle(el);
      if (width !== style.width || height !== style.height) {
        binding.value(); // 关键
      }
      width = style.width;
      height = style.height;
    }
    el.__vueSetInterval__ = setInterval(isReize, 300);
  },
  unbind(el) {
    clearInterval(el.__vueSetInterval__);
  }

})

2、在需要处理的图表Dom标签上添加指令

<div ref="myChart" class="my-chart" v-resize="resize"></div>

3、获取init后的echarts实例，添加resize方法（echart自带的）

 resize() {
    this.myChart = this.$echarts.init(this.$refs.myChart);
    this.myChart.resize();
  },

PS：亲测有效！