vue中echarts图表自适应的实现方式

在Vue中使用ECharts图表自适应有多种实现方式，下面介绍两种常见的方法。

方法一：使用echarts自带的resize方法

ECharts提供了一个自适应的resize方法，可以根据容器的大小来调整图表的大小。在Vue组件中，可以在mounted钩子函数中添加以下代码：

mounted() {
  window.addEventListener('resize', this.handleResize)
  this.initChart()
},
methods: {
  initChart() {
    this.chart = echarts.init(this.$refs.chart)
    // 渲染图表
  },
  handleResize() {
    this.chart.resize()
  }
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
}

其中，initChart方法用于初始化ECharts实例并渲染图表，handleResize方法用于处理窗口大小变化事件并调用resize方法。

方法二：使用Vue的watch监听容器大小变化

在Vue中，可以使用watch监听容器的大小变化，当容器大小发生变化时，重新渲染图表。示例代码如下：

watch: {
  // 监听容器大小变化
  chartWidth() {
    this.chart.resize()
  }
},
methods: {
  initChart() {
    this.chart = echarts.init(this.$refs.chart)
    // 渲染图表
  }
},
mounted() {
  this.initChart()
},
computed: {
  // 计算属性，获取容器宽度
  chartWidth() {
    return this.$refs.chart.clientWidth
  }
}

其中，computed属性用于计算容器的宽度，watch监听该属性的变化并调用resize方法。initChart方法用于初始化ECharts实例并渲染图表。

需要注意的是，方法二需要在容器大小发生变化时更新chartWidth计算属性的值。可以使用resize监听窗口大小变化事件并在该事件处理函数中调用$forceUpdate()强制更新视图，或者使用Vue的自定义指令实现。例如，以下代码使用自定义指令v-resize监听容器大小变化并更新chartWidth计算属性的值：

// 自定义指令v-resize
Vue.directive('resize', {
  inserted(el, binding) {
    Const callback = binding.value
    const observer = new ResizeObserver(entries => {
      entries.forEach(entry => {
        callback(entry.contentRect)
      })
    })
    observer.observe(el)
  }
})
 
// 组件中使用v-resize指令
<template>
  <p ref="chart" v-resize="onResize"></p>
</template>
 
<script>
export default {
  methods: {
    onResize(rect) {
      // 更新chartWidth计算属性的值
      this.chartWidth = rect.width
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      // 渲染图表
    }
  },
  mounted() {
    this.initChart()
  },
  computed: {
    // 计算属性，获取容器宽度
    chartWidth() {
      return this.$refs.chart.clientWidth
    }
  }
}
</script>

这样，在容器大小发生变化时，会调用onResize方法更新chartWidth计算属性的值，并从而触发watch监听并调用resize方法，实现图表的自适应。需要注意的是，自定义指令需要使用ResizeObserver Api来监听DOM元素的大小变化，该API并不兼容所有的浏览器。可以在使用之前先检查是否支持该API，如下所示：

if (typeof ResizeObserver !== 'undefined') {
  // 使用ResizeObserver API
} else {
  // 使用其他方法
}

以上是在Vue中实现ECharts图表自适应的两种常见方法，选择哪种方法取决于具体的需求和实际情况。需要根据容器的大小变化来动态调整图表的大小时，可以选择方法一；如果需要监听多个容器的大小变化并且希望代码更加可复用，可以选择方法二。