vue echarts高度修改

在Vue中使用ECharts，调整图表的高度通常需要结合组件属性或者JavaScript操作DOM元素来完成。以下是一些常见的方法：

1. **在HTML模板中设置默认高度**:
在 Vue 的单文件组件模板中，你可以直接设置 `<div>` 或者 ECharts 元素的 `style` 属性，指定初始高度，例如：

   <div id="chart" style="height: 400px;"></div>

2. **通过 props 传递高度**:
如果想要让父组件动态控制图表高度，可以将高度作为 prop 传入组件：

   // 父组件
   <vue-chart :height="chartHeight"></vue-chart>

   // 子组件
   export default {
     props: ['height'],
     mounted() {
       this.myChart.setOption({ ... }, { height: this.height });
     },
   }

3. **使用 JavaScript 动态调整高度**:
在 Vue 组件的 `mounted()` 生命周期钩子里，你可以获取到 DOM 元素并修改其高度：

   mounted() {
     let chartContainer = document.getElementById('chart');
     chartContainer.style.height = 'yourNewHeight' + 'px';
   }

注意，以上例子假设你已经在 Vue 组件内创建了一个名为 `myChart` 的 ECharts 实例。