How to realize the decentralization of multi-chart resize events by vue

This article mainly introduces vue how to achieve multi-chart resize event decentralization, the article is very detailed, has a certain reference value, interested friends must read it!

Multi-graph resize event decentralization

1.1 General situation

Sometimes we encounter scenarios where there are several diagrams in a component, and we want the diagrams to be resize in the browser resize, so we write in the parent container component:

Mounted () {setTimeout (() = > _ window.onresize = () = > {this.$refs.chart1.chartWrapperDom.resize () this.$refs.chart2.chartWrapperDom.resize () /...}, 200) destroyed () {_ window.onresize = null}

In this way, if the chart component is not on the same page as the parent container component, the state of the child component will be managed by the parent component. For convenience of maintenance, we naturally want the events and state of the child component to be maintained by ourselves. In this way, when adding and deleting components, there is no need to go to the parent components to modify them one by one.

1.2 Optimization

Here the use of lodash throttling throttle function, you can also implement their own, this article also has a throttling implementation to refer to. Take Echarts as an example, in each chart component:

Computed: {/ * Chart DOM * / chartWrapperDom () {const dom = document.getElementById ('consume-analy-chart-wrapper') return dom & & Echarts.init (dom)}, / * * Chart resize throttling, lodash is used here You can also use setTimout to achieve throttling * / chartResize () {return _ .throttle (() = > this.chartWrapperDom & & this.chartWrapperDom.resize (), 400)}, mounted () {window.addEventListener ('resize', this.chartResize)}, destroyed () {window.removeEventListener (' resize', this.chartResize)} these are all the contents of the article "how vue realizes the decentralization of multi-chart resize events". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!