vue中echarts图表大小适应窗口大小且不需要刷新案例

在Vue中实现echarts图表大小适应窗口大小且不需要刷新的方法有很多种，下面以一种常用的方法来进行说明。

首先，我们需要引入echarts的库文件和echarts的vue组件。

import echarts from 'echarts'
import 'echarts/extension/bmap/bmap' // 如需使用百度地图，还需要引入这个文件
import ECharts from 'vue-echarts'

然后，我们在Vue组件的template中使用ECharts组件来渲染echarts图表，并绑定一个方法来动态设置图表的大小。

<template>
  <div>
    <ECharts :options="chartOptions" :style="chartStyle" @ready="handleChartReady"></ECharts>
  </div>
</template>

接下来，我们在Vue组件的script中定义chartOptions和chartStyle两个数据，分别用来指定图表的配置项和样式。

<script>
export default {
  data() {
    return {
      chartOptions: {...}, // 这里是echarts的配置项，根据需求自行设置
      chartStyle: {} // 这里是样式对象，初始值为空
    }
  },
  methods: {
    handleChartReady() {
      // 获取窗口大小
      const {clientWidth, clientHeight} = document.documentElement

      // 设置图表大小为窗口大小
      this.chartStyle = {
        width: clientWidth + 'px',
        height: clientHeight + 'px'
      }

      // 调用echarts的resize方法，使图表大小生效
      this.$refs.chart.resize()
    }
  }
}
</script>

最后，我们在Vue组件的mounted钩子中，初始化图表并调用handleChartReady方法，以确保图表在组件挂载后立即适应窗口大小。

mounted() {
    this.$refs.chart.init()
    this.handleChartReady()
}

通过以上步骤，我们就实现了一个可以自适应窗口大小的echarts图表，并且不需要手动刷新的案例。当窗口大小改变时，图表会动态调整大小以适应窗口，而不需要刷新整个页面。