vue中动态修改echarts的宽高

要动态修改echarts的宽高，可以使用Vue的watch监听组件的宽高变化，然后在回调函数中调用echarts的resize方法来更新图表的宽高。

首先，在组件中引入echarts：

import echarts from 'echarts'

然后在组件的data中定义一个chart对象，用于存储echarts实例：

data() {
  return {
    chart: null
  }
}

接下来，在组件的mounted生命周期函数中初始化echarts实例，并将其挂载到DOM上：

mounted() {
  this.chart = echarts.init(this.$refs.chart)
  // 画图表
  this.drawChart()
}

然后，在组件的watch中监听组件宽高的变化，并在回调函数中调用echarts的resize方法来更新图表的宽高：

watch: {
  // 监听组件宽度变化
  '$refs.chart.clientWidth': function () {
    // 更新图表宽度
    this.chart.resize({ width: this.$refs.chart.clientWidth })
  },
  // 监听组件高度变化
  '$refs.chart.clientHeight': function () {
    // 更新图表高度
    this.chart.resize({ height: this.$refs.chart.clientHeight })
  }
}

最后，在组件的destroyed生命周期函数中销毁echarts实例：

destroyed() {
  this.chart.dispose()
}

完整的代码示例：

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

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    // 画图表
    this.drawChart()
  },
  watch: {
    // 监听组件宽度变化
    '$refs.chart.clientWidth': function () {
      // 更新图表宽度
      this.chart.resize({ width: this.$refs.chart.clientWidth })
    },
    // 监听组件高度变化
    '$refs.chart.clientHeight': function () {
      // 更新图表高度
      this.chart.resize({ height: this.$refs.chart.clientHeight })
    }
  },
  destroyed() {
    this.chart.dispose()
  },
  methods: {
    drawChart() {
      // 画图表的逻辑
    }
  }
}
</script>

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