vue+echarts數據可視化實現自適應屏幕進行縮放

這裏默認已經具備了vue中如何使用echarts，如是小白先查看echarts在vue裏面如何引入使用。
下面進入正題 (直接上代碼)：

<script>
    export default {
        data() {
            return {	
				resizefun:null
			}
        },
        mounted() {
            this.echartLoad();
            //實現自適應
           	this.resizefun = ()=>{
                this.$echarts.init(document.getElementById('myChart')).resize(); //這裏的myChart就是要自適應的圖表容器Id
            }
            window.addEventListener('resize',this.resizefun)
        },
        //移除事件監聽，避免內存泄漏
        beforeDestroy() {
    		window.removeEventListener('resize', this.resizefun)
    		this.resizefun = null
  		},
        methods: {
            echartLoad() {
                // 初始化echarts實例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                myChart.setOption({
                    ...
                });
            }
        }
    }
</script>

*值得注意的是：
IE8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是vue框架下不用考慮這些，因爲vue 本身也不支持ie8以下的~

//兼容寫法
 //爲了移除事件監聽，才封裝了resizefun方法，不是必須
 window.addEventListener('resize',this.resizefun)
 //如果在聲明週期結束時不需要移除事件監聽，上述代碼也可以爲：
 window.addEventListener('resize',()=>{
         this.$echarts.init(document.getElementById('myChart')).resize()
 })
 兼容性寫法一：
 //注意使用es6的箭頭函數，不然this的指向會改變
 window.onresize = () => {
        this.$echarts.init(document.getElementById('myChart')).resize();
 }
 兼容性寫法二：
 let myChart = this.$echarts.init(document.getElementById('myChart'))
  window.onresize = function(){
        myChart .resize();
 }