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();
 }