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

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
}