This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

preface

  • Online music poke me ah!
  • Music blog source code online!
  • The previous several articles talked about the installation and deployment of Docker, the operation is relatively simple. (Entry level)
  • Since I taught requirements to find examples on echarts official website, now requirements directly give me the echarts link, so that I can implement it.
  • You think it’s intact? In fact, it is on this basis, and then draw the dragon add feet.
  • Once I said that loading too much data would cause the page to stall, so I needed to write 5K data on the official website immediately, and said it was ok. Yes, they can, but if they show one, you want to show five charts on one page, that’s five times the performance load, sister.
  • Next, I will share my experience of writing Echarts.
  • Are you ready?

Thanks to the nuggets, will continue to output quality articles ~

First, there are problems

Echarts diagram width and height deformation.

Let’s analyze why this problem exists.

Two, restore the scene

There is a button on the page that, when clicked, displays v-Show’s Echarts.

Three, analysis

Because V-show is just a CSS display hide, v-show itself is a structure that already exists. When the data changes, the structure is not re-rendered, so the Echarts chart is displayed halfway without reaching the width of the outermost large box.

Iv. Solutions

There are two options, as follows:

4.1 with v – the if

Please use v-if instead of V-show on the page.

We know that every time V-if is displayed, the component will be re-rendered. Since V-show is not displayed but the structure already exists, the actual width and height cannot be obtained, but V-show renders the component every time, which means that the width and height can be obtained.

Disadvantage: High performance cost, not very friendly if echarts diagrams switch frequently. The second method is recommended.

4.2 the resize

Again using v-show, reload the echarts resize() method each time it is displayed and manually recalculate the width and height.

The code is as follows:

reload() {
      setTimeout(() = > {
        // this.wChar is an instance of echarts
        if (this.wChart) {
          this.wChart.resize()
        }
      }, 800)}Copy the code

Here also need to add timer oh, let the component display, then go to resize to calculate the width and height.

As a side note, we also need to resize the Echarts instance when the window changes.

You can use the native Window addEventListener to bind the REsize event to listen for window changes.

<div ref="rainChart"></div>
methods:{
   reload() {
      setTimeout(() = > {
        // this.wChar is an instance of echarts
        if (this.wChart) {
          this.wChart.resize()
        }
      }, 800)}},mounted() {
    this.chart = new RainChart(this.$refs.rainChart)
    window.addEventListener('resize'.this.reload)
},
beforeDestroy() {
    window.removeEventListener('resize'.this.reload)
    if (this.chart) {
      this.chart.$charts.dispose()
    }
}
Copy the code

Remember that removeEventListener removes the binding resize event after the component is destroyed.

Add, add, remove

There’s resolve, there’s reject.

Ironically, many people write promises that never catch an error event, never reject.

Afterword.

When I got to know Echarts, I was doing both front and back. At that time will really play echarts out of flower, or next door female god taught well, tears ~

At that time these attributes looked for a long time, the official website are turned over rotten.

The distance between these nodes and the number on the nodes represent the encounter (calculated by writing Python for the first time in my life), which is based on calculation. The relationship between each company involves interests, which will not be explained here.

This is just the first post of Echarts, which will continue to be published.

👍 if it is helpful to you, your thumbs up is the lubricant of my progress.

In the past to recommend

Front-end, deploy dist to Nginx

Multi-picture detailed explanation, one time to understand the prototype chain (ten thousand words)

Lao Shi said that everything is the object, you also believe?

Vue-cli3 builds the component library

Vue implements dynamic routing (and the interviewer blows project highlights)

Axios manipulation in a project you didn’t know about (Core principles of handwriting, compatibility)

VuePress builds project component documentation

Vue-typescript-admin-template background management system

The original link

Juejin. Cn/post / 703466…