vue如何实现多图表resize事件去中心化

这篇文章主要介绍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事件去中心化"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！