vue项目element-dialog弹框第一次不显示echarts图表

Question

项目需要一个弹框，弹框里面需要一个折线图，但是第一次打开弹框折线图不显示，第二次进入显示

<template>
<div>

<el-dialog :visible.sync="dialogVisible" @open="open()">
    <div id="myChart" style="width:900px ;height:500px"></div>
</el-dialog>
<el-button type="primary" @click="dialogVisible = true" icon="el-icon-edit"></el-button>

</div>
</template>
<script>
var echarts = require('echarts');
// 引入基本模板
// let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
    
    data(){
        return {
            dialogVisible:false
        }
    },
    // mounted(){
    //     this.drawLine();
    //     this.$refs.dialog.open();
    // },
    methods:{
        open() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title : {
                    text: '今日数据',
                    subtext: '设备IP'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['今日剩余电流','昨日剩余电流']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} A'
                        }
                    }
                ],
                series : [
                    {
                        name:'今日剩余电流',
                        type:'line',
                        data:[644,987,135,486,948,498,356,268,186,848,168],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'昨日剩余电流',
                        type:'line',
                        data:[125,555,444,333,999,888,222,444,555,888,150],
                        markPoint : {
                            data : [
                                {name : '日最低', value : -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            })
        }
    }
}

</script>

Answer 1

打开弹窗后，在

this.$nextTick(() => {
    // 渲染chart
})

Answer 2

在methods方法中找到你注册打开弹窗的方法在里面执行
this.$nextTick(() => {

this.你的方法名()

})

Answer 3

因为open函数第一次执行的时候还没有元素myChart，所以不显示，另外，元素处于隐藏状态，也不会显示图表