如何在vue的dialog弹窗中显示echarts图表，并且点击第一次就能显示，解决不会出现点击一次，不出现图表，第二次才出现图表的问题。
经过多次搜索并且在别人的启示下做出改动。
实现的效果如下：
完整代码
<template>
<div class=”app-container”>
<el-button type=”text” @click=”newDialogFormVisible = true”>点击打开 Dialog</el-button>
<el-dialog title=”新建”
:modal-append-to-body=’false’
:visible.sync=”newDialogFormVisible”
@open=”open()”
append-to-body>
<el-form :inline=”true” size=”medium” label-width=”80px”>
<el-row :gutter=”10″>
<el-col :xs=”24″ :sm=”24″ :md=”24″ :lg=”24″>
<el-form-item label=”样本曲线”>
<div id=”newEcharts” style=”width:500px;height:400px;padding-top:40px”></div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-button type=”primary” @click=”dialogVisible = true” icon=”el-icon-edit”></el-button>
</div>
</template>
<script>
export default {
data() {
return {
newVisible: false,
newDialogFormVisible: false,
};
},
methods: {
// 创建方法
initEcharts() {
var echarts = require(‘echarts’);
// 基于准备好的dom，初始化echarts实例
const myChart = this.$echarts.init(document.getElementById(‘newEcharts’));
// 绘制图表
const option = {
title: {
text: ‘ECharts 入门示例’
},
tooltip: {},
xAxis: {
data: [‘衬衫’, ‘羊毛衫’, ‘雪纺衫’, ‘裤子’, ‘高跟鞋’, ‘袜子’]
},
yAxis: {},
series: [{
name: ‘销量’,
type: ‘bar’,
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option)
},
open(){
this.$nextTick(() => {
// 执行echarts方法
this.initEcharts()
})
}
},
}
</script>
转自：https://blog.csdn.net/qq_19280295/article/details/113176991