关于vue 结合原生js 解决echarts resize问题

关于vue结合原生js解决echarts resize问题，可以使用下面的攻略：

攻略说明

1. 采用vue-echarts插件加载echarts，并且绑定图表的 DOM 元素到 vue 实例中
2. 使用 js 的 resize() 方法，监听 window 大小变化，当窗口大小发生改变时，使用 triggerResize() 方法通知echarts自适应大小

示例说明

1. 模板代码

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import { use } from "echarts/core";
  import { CanvasRenderer } from "echarts/renderers";
  use([ CanvasRenderer ]);

  export default {
    name: 'EchartsContainer',
    props: ['option'],
    mounted() {
      this.init();
      window.addEventListener('resize', this.handleWindowResize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize);
    },
    methods: {
      init() {
        this.chart = echarts.init(this.$refs.chart);
        this.chart.setOption(this.option);
      },
      handleWindowResize() {
        this.chart.resize();
      }
    }
  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
  }
  .chart {
    width: 100%;
    height: 400px;
  }
</style>

在这个例子中，我们创建了一个EchartsContainer组件，使用 echarts.init() 方法初始化 echarts，将其绑定到 DOM 元素中。在window的resize事件中，触发 resize() 方法，让echarts自适应大小。

1. 使用原生js的示例代码

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'EchartsContainer',
    props: ['option'],
    mounted() {
      this.init();
      window.addEventListener('resize', this.handleWindowResize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize);
    },
    methods: {
      init() {
        this.chart = echarts.init(this.$refs.chart);
        this.chart.setOption(this.option);
      },
      handleWindowResize() {
        this.chart.resize();
      },
      // 使用原生js方法监听resize事件
      bindWinResizeHandler() {
        let _this = this; // 注意this指向问题
        let timer = null;
        window.onresize = () => {
          if(timer){
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            _this.resize();
          }, 100);
        }
      },
      // 调用chats组件resize方法
      resize() {
        this.chart.resize();
      }
    }
  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
  }
  .chart {
    width: 100%;
    height: 400px;
  }
</style>

在这个例子中，我们使用了原生的js方法监听 window 的 resize 事件，并且利用setTimeout()方法进行延迟处理， 当延迟时间达到 100ms 时调用 resize() 函数，其中 this 指向到 的是组件的 vue 实例，不是原生 js 当前环境下的 this。 在resize()方法中，我们调用了 echarts 组件的 resize() 方法，让图表自适应大小。

综上所述，我们探讨了在 vue 中结合 echarts 包含两个不同示例的 resize 思路。