四、Vue中echarts圖表自適應

<template>
    <div id="app">

    </div>
</template>

<script>
export default {
    data () {
        return {
            myCharts: null
        }
    },
    created () {
        this.myCharts = echarts.init(document.getElementById('#app'))
    },
    methods: {
        // 定義一個resz的方法
        resz () {
            //echarts的實例中提供一個resize(),可以使用瀏覽器寬度改變的時候做出自適應
            this.myCharts.resize()
        }
    },
    mounted () {
        window.addEventListener('resize', this.resz)
    },
    // 銷燬組件之前要進行刪除這個事件監聽 
    beforeDestroy () {
        window.removeEventListener('resize', this.resz)
    }
}
</script>

<style lang="scss" scoped>
</style>