The canvas size of Vue echarts becomes 100px

Many posts on the Internet did not mention the idea. Today, the fundamental solution to similar problems is not only in Vue.
Solution: After the page is redrawn, the drawing code is executed. In vue, you can put the drawing code in this.$nextTick.
Description:
First, we want to click the button on the page to pop up a box, occupying the page width: 80%, height: 70%, and the echart diagram inside occupies 100% of the dialog box . As for why the 100 ratio is used, of course it is to adapt to different resolutions. As shown below: the

code is as follows:

<template>
    <div class="echartTest">
        <Modal
            v-model="modal1"
            class-name="modal-wrap-cate"
            footer-hide
            :transfer="false">
            <div ref="echart" class="echart-box"></div>
        </Modal>
        <Button type="primary" @click="drawEchart" >绘图</Button>
    </div>
</template>
<script>
    const echarts = require("echarts/lib/echarts"); // 引入 ECharts 主模块
    require("echarts/lib/component/grid");
    require("echarts/lib/chart/line");//引入折线
    export default {
        data(){
            return{
                modal1:false
            }
        },
        methods:{
            drawEchart(){
                this.modal1=true
                let myChart=echarts.init(this.$refs.echart)
                let option = {
                    grid:{
                        left:50,
                        right:50,
                        top:50,
                        bottom:50
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }]
                };
                myChart.setOption(option)
            }
        }
    }
</script>
<style lang="less">
    .echartTest{
         .modal-wrap-cate{
                .ivu-modal{
                    width: 80% !important;
                    height:70% !important;
                    .ivu-modal-body {
                        padding: 54px 92px;
                    }
                }
                .ivu-modal-content {
                    width: 100%;
                    height: 100%;
                    .ivu-modal-body{
                        width: 100%;
                        height: 100%;
                    }
                }
                .echart-box{
                    width:100%;
                    height: 100%;
                }
            }
    }
</style>

Obviously there is no effect we want. Looking at the page elements, it is found that the canvas element set to 100% actually becomes 100px. This is because the size of the element was not found, so I drew a basic agreed size of 100px. As shown in the figure below:

Now we put the drawing code into $nextTick, the code is as follows:

<template>
    <div class="echartTest">
        <Modal
            v-model="modal1"
            class-name="modal-wrap-cate"
            footer-hide
            :transfer="false">
            <div ref="echart" class="echart-box"></div>
        </Modal>
        <Button type="primary" @click="drawEchart" >绘图</Button>
    </div>
</template>
<script>
    const echarts = require("echarts/lib/echarts"); // 引入 ECharts 主模块
    require("echarts/lib/component/grid");
    require("echarts/lib/chart/line");//引入折线
    export default {
        data(){
            return{
                modal1:false
            }
        },
        methods:{
            drawEchart(){
                this.modal1=true
                this.$nextTick(()=>{
                    let myChart=echarts.init(this.$refs.echart)
                    let option = {
                        grid:{
                            left:50,
                            right:50,
                            top:50,
                            bottom:50
                        },
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            smooth: true
                        }]
                    };
                    myChart.setOption(option)
                })
            }
            
        }
    }
</script>
<style lang="less">
    .echartTest{
         .modal-wrap-cate{
                .ivu-modal{
                    width: 80% !important;
                    height:70% !important;
                    .ivu-modal-body {
                        padding: 54px 92px;
                    }
                }
                .ivu-modal-content {
                    width: 100%;
                    height: 100%;
                    .ivu-modal-body{
                        width: 100%;
                        height: 100%;
                    }
                }
                .echart-box{
                    width:100%;
                    height: 100%;
                }
            }
    }
</style>

The picture is as follows:

When we click the button, the code that will trigger the button, the dialog box on the page has not come out yet, and the drawing has actually been completed at this time. So the 100px we see is actually the picture drawn before the dialog box is displayed. this.$nextTick is to wait until the page is rendered and then execute, that is, after the dialog box comes out, the echart element will have the size. So the effect comes out.