关于echarts的页面放大缩小时，echarts的重新绘制

需求：触发某一条件后echarts进行重新绘制，宽高 随着父级的变化而变化

正常效果 （折线图）：

image.png

放大效果 （折线图）：

image.png

代码：

dom部分

style部分

    .echartCon {
        width: 100%;
        height: calc(100% - 80px);
    }
    .iconFD {
        width: 46px;
        height: 46px;
        position: absolute;
        bottom: 10px;
        right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        box-shadow: 0px 0px 10px #000;
        color: #fff;
        cursor: pointer;
        .iconfont {
            font-size: 24px;
        }
    }

js部分

        // 监听元素宽高变化
        import elementResizeDetectorMaker from 'element-resize-detector'
        // 点击 放大缩小图标
        myHW() {
            this.iconFangda = !this.iconFangda
            const _this = this
            const erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('app'), (element) => {
                _this.$nextTick(() => {
                    if (this.iconFangda) {
                        let height = element.offsetHeight - 520
                        let width = element.offsetWidth - 300
                        this.$refs.tapp.style.height = height + 'px'
                        this.$refs.tapp.style.width = width + 'px'
                        // 折线图
                        this.drawLine2(height, width)
                    } else {
                        let height = element.offsetHeight - 380
                        let width = element.offsetWidth - 60
                        this.$refs.tapp.style.height = height + 'px'
                        this.$refs.tapp.style.width = width + 'px'
                        this.drawLine2(height, width)
                    }
                })
            })
        },
        // 折线图
        drawLine2(height, width) {
            let echarts = require('echarts')
            let myChart2 = echarts.init(
                document.getElementById('registerChart2')
            )
            // 重新绘制！！！必须添加这个！
            myChart2.clear()
            myChart2.resize({ height: height, width: width })
            // 绘制图表
            myChart2.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                color: ['#409eff'],
                grid: {
                    left: '3%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.myData2.timeStr,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: function(value) {
                            const formatInt = (num, prec = 2, ceil = true) => {
                                const len = String(num).length
                                if (len < prec) {
                                    return num
                                }

                                const mult = Math.pow(10, prec)
                                return ceil
                                    ? Math.ceil(num / mult) * mult
                                    : Math.floor(num / mult) * mult
                            }
                            return formatInt(value.max, 2, true)
                        },
                    },
                ],
                series: [
                    {
                        smooth: true,
                        type: 'line',
                        data: this.myData2.countInt,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(60, 177, 255,0.2)', 
                                    },
                                    {
                                        offset: 0.9,
                                        color: 'rgba(0,0,0,0)', 
                                    },
                                ],
                                global: false, 
                            },
                        },
                    },
                ],
            })
        },