外贸销售网站有哪些,做网站公司的商标需要注册吗,全网推广服务,企业网站seo推广问题描述#xff1a;
后台管理系统#xff0c;左侧的菜单栏是可以展开/收起的#xff0c;默认是展开#xff0c;此时页面上的图表加载正常#xff0c;如果收起后再展开#xff0c;页面底部就会出现滚动轴#xff0c;图表没有重新绘制。
网上也查了很多方法。基本都是通…问题描述
后台管理系统左侧的菜单栏是可以展开/收起的默认是展开此时页面上的图表加载正常如果收起后再展开页面底部就会出现滚动轴图表没有重新绘制。
网上也查了很多方法。基本都是通过检测浏览器窗口大小的变化来实现重新绘制但是我项目中只是左侧菜单栏发生了展开、收缩实际浏览器 窗口的大小并没有发生改变试了很多都没效果如下
只要窗口大小发生像素变化就会触发 window.addEventListener(resize, () { this.myChart.resize(); // 窗口发生改变就更新echarts }); 我的解决方法
1、保存收起/展开 状态当操作 展开/ 收起的时候watch检测值的变化(我项目中状态是存到了store中)
computed: { redraw() { return this.$store.state.app.sidebar.redraw }
}
2、监测菜单栏的状态变化重新绘制echart图表
watch: { redraw() { this.$nextTick(() { this.initEachertsDate() }) }
}
methods: { initEachertsDate() { let option { ... 中间省略图表的配置项...} if (this.$refs.echarts) { const myCharts this.$echarts.init(this.$refs.echarts) myCharts.setOption(option) myCharts.resize() // 重新绘制 } } }
以上代码完美解决我项目中遇到的问题。每个人遇到的问题都不太一样具体可以多看看多尝试
