mpvue使用echarts 第二次进入页面 图表不显示

Question

展示一个图表多个地方需要使用，做成了一个组件，第一次进入页面，图表展示正常，返回之后再次进入页面，图表就不在显示。但是把下面的代码做成一个页面就不会存在这样的问题。本人是新手，感觉可能是哪里渲染出现了问题，求大佬解答一下。
这是组件的代码。

<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; i++) {
                    timeList.push(`${yearnow}年/${i}月`)
                    if (i == 12) {
                        console.log(123);
                        for (let z = 0; z <= 13 - monthnow; z++) {
                            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) {
            // 不能使用created和onLoad，必须是在模版加载完成之后，才能初始化图表。
            this.InitChart()
        },
        onLoad(x) {
            this.childrenSex = x.sex
            this.childrenAge = x.age
        }
    }
</script>

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

感谢各位

Answer 1

已经解决，去掉lazyLoad