el-dialog 中动态渲染 echarts 图表
-
现象
第一次点开不显示图表，第二次点开虽然显示图表，但是图表挤在一起，页面检查发现宽高只有100px,但是明明已经设置样式宽高100%
-
组件代码
<el-dialog v-dialogDrag title="" width="50%" top="10vh" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="handledialogClose" > <div class="chart-box"> <div ref="chartContainer" class="chart-container"></div> </div> </el-dialog> -
分析问题
初步估计是dialog还没完全显示出来，图表已经初始化，导致第一次图表容器还未挂载。然后因为装载图表容器的dom还未挂载，导致设置的宽高样式100%无效。
-
解决办法
this.$nextTick(() => { if (this.chart) { this.chart.dispose(); this.chart = this.$echarts.init(this.$refs.chartContainer); this.chart.setOption(this.option, true); } else { this.chart = this.$echarts.init(this.$refs.chartContainer); this.chart.setOption(this.option, true); } })
