<template>
    <div class="chart"></div>
</template>
<!--end-->
<script>
import * as echarts from "echarts";
export default {
    name: 'Charts',
    props: ['seriesData', 'eOption'],
    // 数据
    data() {
        return {
            chart: null
        };
    },
    watch: {
        eOption: {
            deep: true,
            handler() {
                this.updateChartView();
            }
        }
    },
    mounted() {
        this.chart = echarts.init(this.$el);
        this.updateChartView();
        window.addEventListener('resize', this.handleWindowResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleWindowResize);
    },
    methods: {
        /**
         * 更新echart视图
         */
        updateChartView() {
            if (!this.chart) return;
            this.chart.clear();
            setTimeout(() => {
                this.chart.setOption(this.eOption, true);
            }, 200);
        },

        /**
         * 当窗口缩放时，echart动态调整自身大小
         */
        handleWindowResize() {
            if (!this.chart) return;
            this.chart.resize();
        }
    }
};
</script>
<style scope>
.chart {
    width: 100%;
    height: 100%;
}
</style>