undefinedfix
Sign in

For the first time, the element dialog box of the Vue project does not display the charts

Jimmer303 edited in Tue, 30 Aug 2022

The project needs a pop-up box, and a line chart is needed in the pop-up box. However, when the pop-up box is opened for the first time, the line chart will not be displayed. When the pop-up box is opened for the second time, it will be displayed

<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 ecarts = require ('ecarts'); / / import basic template / / let ecarts = require ('ecarts / lib / ecarts') / / import histogram component require ('ecarts / lib / chart / bar ') / / import prompt box and Title Component require ('ecarts / lib / component / Toolkit') require ('ecarts / 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>

3 Replies
SpenserWilson1
commented on Tue, 30 Aug 2022

After opening the pop-up window, in the

this.$nextTick(() => {
    // 渲染chart
})
user9927059
commented on Tue, 30 Aug 2022

In the methods method, find the method in which you register to open the pop-up window and execute this. $nexttick (() = > 0{

this.你的方法名()

})

JC1
commented on Tue, 30 Aug 2022

The first time the open function is executed, there is no element mychart, so it is not displayed. In addition, the element is hidden, and the chart is not displayed

lock This question has been locked and the reply function has been disabled.