关于echarts大小自适应的问题解决

61 阅读1分钟

echarts的API——resize()

实现逻辑大家想必都不陌生,只需调用resize方法即可,但是这里也分两种情况,有的是要改变整个浏览器窗口大小,有的只改变内部的dom

1.改变整体浏览器窗口的大小

 initChart() {
     ....
     window.addEventListener('resize', () => {
         this.chartObj.resize()
     })
 },

2.只改变外层dom元素大小

observeResize() {
    const or = new ResizeObserver(entries => {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            this.chartObj && this.chartObj.resize()
        }, 100)
    })
    or.observe(document.getElementById('myChart')) // 需要监听的dom元素
}