这篇文章主要介绍vue如何实现多图表resize事件去中心化，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
多图表resize事件去中心化
1.1 一般情况
有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：
mounted() {
setTimeout(() => window.onresize = () => {
this.$refs.chart1.chartWrapperDom.resize()
this.$refs.chart2.chartWrapperDom.resize()
// ...
}, 200)
destroyed() { window.onresize = null }这样子图表组件如果跟父容器组件不在一个页面，子组件的状态就被放到父组件进行管理，为了维护方便，我们自然希望子组件的事件和状态由自己来维护，这样在添加删除组件的时候就不需要去父组件挨个修改
1.2 优化
这里使用了lodash的节流throttle函数，也可以自己实现，这篇文章也有节流的实现可以参考一下。 以Echarts为例，在每个图表组件中：
computed: {
/**
* 图表DOM
*/
chartWrapperDom() {
const dom = document.getElementById('consume-analy-chart-wrapper')
return dom && Echarts.init(dom)
},
/**
* 图表resize节流，这里使用了lodash，也可以自己使用setTimout实现节流
*/
chartResize() {
return _.throttle(() => this.chartWrapperDom && this.chartWrapperDom.resize(), 400)
}
},
mounted() {
window.addEventListener('resize', this.chartResize)
},
destroyed() {
window.removeEventListener('resize', this.chartResize)
}以上是“vue如何实现多图表resize事件去中心化”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
