echarts根据可视化窗口变化改变图表尺寸

echarts改变图标尺寸resize监听窗口大小变化onresize原理代码实现加防抖

echarts改变图标尺寸resize

官方API

监听窗口大小变化onresize

官方API

原理

用onresize监听窗口大小变化，窗口变化后将echarts图大小进行重置（resize）

代码

实现

// echarts实例 let bar = this.$echarts.init(document.getElementById('bar')) // 配置项 option = {...} // 设置配置项 bar.setOption(option) // 据可视化窗口变化改变图表尺寸 window.onresize = () => { bar.resize() }

加防抖

上面代码可以实现根据可视化窗口变化改变图表尺寸，但是如果可视化窗口进行频繁改变时太耗性能，所以加一个防抖来节省性能。

// 防抖函数 function debounce (fun, wait) { let timeOut return function() { if (timeOut) clearTimeout(timeOut) timeOut = setTimeout(() => { fun() }, wait) } // echarts实例 let bar = this.$echarts.init(document.getElementById('bar')) // 配置项 option = {...} // 设置配置项 bar.setOption(option) // 实现防抖 let barResize = debounce(() => {bar.resize}, 500) // 据可视化窗口变化改变图表尺寸 window.onresize = () => { barResize }