Javascript Highcharts图表不考虑容器'；s宽度

我在ElementUI框架的选项卡中使用highcharts，在第一次加载时，图表总是超过父容器。我怎样才能解决这个问题

图表似乎是在其容器受到选项卡渲染和缩小的影响之前渲染的。我想知道我是否能确保Highcharts总是在元素UI之后出现

此外，我知道我可以在所有元素正确呈现后重新流化图表，但没有任何事件可以连接到该事件中

<div id="app">
    <template>
        <el-tabs tab-position="left" class="tabs">
            <el-tab-pane label="Tab1">
                <el-button @click="reflowChart">Reflow chart</el-button>
                <highcharts ref="highchart" :options="chartOptions"></highcharts>
            </el-tab-pane>
            <el-tab-pane label="Tab2">
                Test
            </el-tab-pane>
        </el-tabs>
    </template>
</div>

回流图
试验

我在这里重现了这个问题：

---

感谢您的快速响应，我已经尝试过了，我认为它不起作用，因为在本地开发时，错误有时仍然存在。部署时，它是固定的。我相信这与webpack如何在开发模式下为资产服务有关，这使得样式以错误的顺序触发

---

如果有人知道更换热模块的webpack dev server会导致这种情况，以及如何避免这种情况，我很想知道

您试图将图表作为子组件，并将其导入正在显示的组件中？（而不是使用

）。尝试创建为子组件。顺便说一句，我尝试在图表中使用棘手的解决方案

v-if

，当安装

并呈现良好时…我完全同意@Mikel，我已经在您在包的GitHub存储库中创建的票据上回答了这个问题。在这里，您还可以找到实际发生的情况的描述，以及如何解决问题的实例。这是上面提到的票：