这篇文章主要介绍vue如何实现多图表resize事件去中心化，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
10年积累的成都网站设计、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有临沂免费网站建设让你可以放心的选择与我们合作。
多图表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事件去中心化”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
