vue2 使用echarts注意点 clear dispose resize 方法

<template>
    <div id="temperature-main">
    </div>
</template>

<script>
import * as echarts from 'echarts';
var myChart = null
export default {
    props: {
        echartsData: {
            type: Object,
            default: () => { }
        }
    },
    watch: {
        echartsData() {
            this.updateData()
        }
    },
    mounted() {
        // console.log(this.echartsData.electricAvg);
        this.init()
    },
    beforeDestroy() {
        if (myChart != null) {
            myChart.dispose()
        }
        window.removeEventListener("resize", function line() {
            myChart.resize();
        });
    },
    methods: {
        init() {
            var chartDom = document.getElementById('temperature-main');
            myChart = echarts.init(chartDom);
            window.addEventListener('resize', function line() {
                myChart.resize();
            })
            // this.updateData()

        },
        updateData() {
            if (myChart != null) {
                myChart.clear()
            }
            var option;

            option = {
                title: {
                    text: '线缆温度与电流温度对比图',
                    textStyle: {
                        color: '#3D3D3D'
                    },
                    top: '5%'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['平均三相电流', '平均三相温度']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '20%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.echartsData.electricAvg.map(it => it.time)
                },
                yAxis: [{
                    name: 'A',
                    type: 'value',
                    // min: 'dataMin',
                    // max: 'dataMax',
                }, {
                    name: '°C',
                    type: 'value',
                    // min: 'dataMin',
                    // max: 'dataMax',
                }],
                dataZoom: [{ // 这部分是关键配置
                    type: 'inside', // 内置型数据区域缩放组件
                    start: 0, // 数据窗口范围的起始百分比
                    end: 100 // 数据窗口范围的结束百分比
                }],
                series: [
                    {
                        name: '平均三相电流',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        itemStyle: {
                            color: '#E7A900'
                        },
                        smooth: true,
                        lineStyle: {
                            color: '#E7A900'
                        },
                        data: this.echartsData.electricAvg.map(it => +it.value)
                    },
                    {
                        name: '平均三相温度',
                        type: 'line',
                        yAxisIndex: 1,
                        symbol: 'circle',
                        itemStyle: {
                            color: '#2D9CDB'
                        },
                        smooth: true,
                        lineStyle: {
                            color: '#2D9CDB',
                        },
                        data: this.echartsData.temperatureAvg.map(it => +it.value)
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    }
}
</script>

<style lang="scss" scoped>
#temperature-main {
    width: 100%;
    height: 100%;
}
</style>