vue2中echarts自动缩放解决方案

先看效果图我的需求是可拖拽式echarts图标、拖动盒子放大echarts

 html部分需要定义两个盒子、存放echarts图标的盒子外面包裹一个盒子

container为父盒子、下面会使用refs获取父盒子
chart为子盒子、同样会用refs获取

  <div ref="container" class="containers">
    <div class="echart" ref="chart"></div>
  </div>

然后再new ResizeObserver(this.handleResize)监听父容器发生变化调用获取元素高度方法

mounted(){
    this.handleResize();
    // 监听父容器大小变化来调整图表大小
    const resizeObserver = new ResizeObserver(this.handleResize);
    resizeObserver.observe(this.$refs.container);
}

 这边定义一个方法用来获取元素的宽高

  methods: {
    handleResize() {
      if (this.$refs.container) {
        const container = this.$refs.container;
        const width = container.clientWidth;
        const height = container.clientHeight;
        // 设置图表大小并重绘
        this.$nextTick(() => {
          //这边的this.echarts就是子盒子的dom元素
          this.echarts = this.$echarts.init(this.$refs.chart);
          this.echarts.resize({ width, height });
        });
      }
    },
  },

 页面销毁再去掉监听

  beforeDestroy() {
    const resizeObserver = new ResizeObserver(this.handleResize);
    resizeObserver.unobserve(this.$refs.container);
  },