vue使用echarts窗口自适应

1. 使用window.onresize

var myChart = echarts.init(document.getElementById('myChart'));
window.onresize = () => {
   
	myChart.resize()
}

优点：

• 可以根据窗口大小实现自适应

缺点：

• window.onresize是绑定到window上的，切换vue页面时监听依然存在
• 其他页面有window.onresize事件时，会互相覆盖

2.给div绑定onresize事件

忘了是给谁的博客上看到的，还挺好用的

1. 引入esresize.js

import EleResize from '@/assets/js/esresize';

3. 给div绑定事件

var myChart = echarts.init(document.getElementById('myChart'));
var resizeDiv = document.getElementById('myChart')

EleResize.on(resizeDiv, ()=> {
   
    myChart.resize()
})

优点：

• 可以根据窗口大小实现自适应
• 切换vue页面时，事件不会继续触发
• 事件不会相互覆盖

缺点：

• 未知

3. esresize.js代码

var EleResize = {
   
    _handleResize: function (e) {
   
        var ele = e.target || e.srcElement
        var trigger = ele.__resizeTrigger__
        if (trigger