首页 前端知识 echarts使用resize重绘时,本应该变小的图变大了

echarts使用resize重绘时,本应该变小的图变大了

2024-09-01 23:09:52 前端知识 前端哥 56 568 我要收藏

问题描述:

监听可视窗口区域变化时,如框架侧边栏隐藏。隐藏侧边栏,空白区域增加,resize的图却没有变大。隐藏后展开侧边栏,空白区域减少,resize的图变得更大,这显然是不合理的。

代码如下

export default{
	data(){
		return{
		chart:null,
		//配置项省略
		option:{...}
	},
	methods:{
		//echart初始化
		echartsInit(){
		this.chart = echarts.init(document.getElementById('decAmount'),'macarons')
		this.chart.setOption(this.option)
		}
	},
	mounted(){
	//挂载到mounted上初始化
		this.echartsInit()
	},
	watch:{
		'isCollapse'(val){
			//监听isCollapse属性,当该值变化时说明窗口大小发生了变化
			this.chart.resize()
		}
	}
}

问题详细描述

应效果不一致的原因是因为,框架的侧边栏收起是一个动态隐藏的效果,侧边栏隐藏时,触发了resize,但是窗口大小还未变化,所以不变大,侧边栏隐藏后,窗口变大了 ,再次监听,resize以为空白区域更多了,因此变大

解决办法

在resize的地方设置定时,等到侧边栏(隐藏/展开)完成后再调用resize()

watch:{
    'isCollapse'(val){
      setTimeout(()=>{
        this.chart.resize()
      },500)
    }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17426.html
标签
评论
发布的文章

Spring MVC-JSON

2024-06-02 09:06:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!