Echarts图形canvas根据容器宽高自适应

做大屏的时候，我们的容器往往都是根据窗口的大小自适应的，所以chart图的宽高也会根据此来缩放；还有一种就是窗口宽高不变，但是chart图父容器宽高变化，这也需要适应。但实际上chart图是不会跟着外部容器的变化而变化的，除非手动刷新。记录一下，我遇到到的这两种情况和解决方法。

1.窗口大小变化，chart图自适应

这一种情况比较常见，很简单，只需要监听window的resize事件即可！

window.onresize = function() {
    setTimeout(function() {
      myChart.resize() 
    }, 10)
}

2.窗口大小不变，chart图父容器大小变化，chart图自适应

这种花费了我一个多小时找答案，不过也挺简单，安装一个插件吧！插件名字叫element-resize-detector。

安装

npm install element-resize-detector

使用

按需引入

import elementResizeDetectorMaker from 'element-resize-detector'

mounted() {
    const that = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('isEcharts'), element => {
      that.$nextTick(() => {
           myChart.resize()
      })
    })
},