vue中根据数据修改echarts的宽高

在Vue中，可以使用`v-bind`指令绑定Echarts的宽高，然后根据数据动态修改绑定的属性值。具体实现步骤如下：

1. 在`<template>`标签中，使用`div`标签包裹Echarts图表，并使用`v-bind`指令绑定宽高属性，示例如下：

<template>
  <div class="echarts-container" 
       :style="{width: echartsWidth + 'px', height: echartsHeight + 'px'}"></div>
</template>

2. 在`<script>`标签中，定义`echartsWidth`和`echartsHeight`两个响应式数据，并在需要修改宽高的地方修改数据值，示例如下：

<script>
export default {
  data() {
    return {
      echartsWidth: 600,
      echartsHeight: 400
    }
  },
  mounted() {
    // ... Echarts初始化代码 ...
  },
  methods: {
    updateEchartsSize() {
      // 根据数据更新宽高
      this.echartsWidth = 800
      this.echartsHeight = 600
      // 调用Echarts的resize方法重新渲染图表
      this.$refs.echarts.resize()
    }
  }
}
</script>

3. 如果需要在Vue的`mounted`生命周期中初始化Echarts图表，需要为`div`标签添加`ref`属性，并在`mounted`方法中使用`this.$refs`获取`div`元素，并调用`echarts.init()`方法初始化Echarts图表，示例如下：

mounted() {
  // 获取Echarts容器元素
  const echartsContainer = this.$refs.echarts
  // 初始化Echarts图表
  const echartsInstance = echarts.init(echartsContainer)
  // ... Echarts配置和数据处理 ...
}

以上就是根据数据修改Echarts宽高的实现方法，希望能对你有所帮助。