四、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>