echarts根据可视化窗口变化改变图表尺寸
echarts根据可视化窗口变化改变图表尺寸echarts改变图标尺寸resize监听窗口大小变化onresize原理代码实现加防抖echarts改变图标尺寸resize官方API监听窗口大小变化onresize官方API原理用onresize监听窗口大小变化,窗口变化后将echarts图大小进行重置(resize)代码实现// echarts实例let bar = this.$echarts.i
·
echarts根据可视化窗口变化改变图表尺寸
echarts改变图标尺寸resize
监听窗口大小变化onresize
原理
用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
}
更多推荐
已为社区贡献1条内容
所有评论(0)