display a chart needs to be used in multiple places, made into a component, the first time to enter the page, the chart display is normal, return to the page again, the chart is no longer displayed. But there will be no such problem if you make the following code into a page. I am a novice, I feel that there may be a problem with the rendering, ask the boss to answer it.
this is the code for the component.

<template>
    <div class="echarts-wrap">
        <mpvue-echarts lazyLoad :echarts="echarts" :onInit="HandleInit" ref="echarts" />
    </div>
</template>

<script>
    import echarts from "echarts"
    import mpvueEcharts from "mpvue-echarts"
    import {
        man,
        woman
    } from "../utils/data.js"
    let chart = null;
    export default {
        components: {
            mpvueEcharts
        },
        data() {
            return {
                childrenSex: null,
                childrenAge: null,
                echarts,
                option: null,
                normalHight: [123, 134, 146, 157, 167, 189, 190, 214, 223, 233, 244, 255, 266, 277, 288],
                perfectHight: [211, 222, 233, 244, 255, 266, 277, 288, 299, 311, 322, 333, 344, 355, 366],
                lowHight: [211, 222, 233, 244, 255, 266, 277, 288, 299, 311, 322, 333, 344, 355, 366],
                youHight: [211, 222, 233, 244, 255, 266, 277, 288, 299, 311, 322, 333, 344, 355, 366]
            }
        },
        methods: {
            InitChart() {
                let timeList = []
                let yearnow = new Date().getFullYear()
                let monthnow = new Date().getMonth() + 1
                for (let i = monthnow; i <= 12; iPP) {
                    timeList.push(`${yearnow}/${i}`)
                    if (i == 12) {
                        console.log(123);
                        for (let z = 0; z <= 13 - monthnow; zPP) {
                            timeList.push(`${yearnow+1}/${z+1}`)
                        }
                    }
                }
                /**
                 * @msg: 
                 * @param {type} 
                 * @return: 
                 */
                if (this.childrenSex == 2) {
                    this.normalHight = [111, 111, 111, 111, 111, 111]
                } else {
                    this.normalHight = [333, 333, 333, 333, 333, 333]
                }
    
    
    
                this.option = {
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        itemWidth: 10,
                        itemHeight: 7,
                        data: ["", "", "", ""],
                        itemGap: 5
                    },
                    dataZoom: [{
                            show: true,
                            realtime: true,
                            handleSize: 0,
                            start: 0,
                            end: 50
                        },
                        {
                            type: "inside",
                            realtime: true,
                            start: 0,
                            end: 50
                        }
                    ],
                    calculable: true,
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        data: timeList
                    }],
                    yAxis: [{
                        type: "value",
                        max: 600,
                        min: 0
                    }],
                    series: [{
                            name: "",
                            type: "line",
                            stack: "",
                            data: this.normalHight
                        },
                        {
                            name: "",
                            type: "line",
                            stack: "",
                            data: this.perfectHight
                        },
                        {
                            name: "",
                            type: "line",
                            stack: "",
                            data: this.lowHight
                        },
                        {
                            name: "",
                            type: "line",
                            stack: "",
                            data: this.youHight
                        }
                    ]
                };
                this.$refs.echarts.init()
            },
            HandleInit(canvas, width, height) {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height
                })
                canvas.setChart(chart)
                chart.setOption(this.option, true)
                return chart
            },
        },
        mounted(x) {
            // createdonLoad
            this.InitChart()
        },
        onLoad(x) {
            this.childrenSex = x.sex
            this.childrenAge = x.age
        }
    }
</script>

<style scoped>
    .echarts-wrap {
        width: 100%;
        height: 300px;
    }
</style>

Thank you