How to solve the pit Cannot read properties of undefined (reading 'type') encountered by vue3+echart5

1. Error description

In vue3, use data to initialize the echart chart

export default {
  data() {
    return {
      chart: null,
      ...
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.id))
    this.chart.setOption({...})
  },
  ...
}

When the window size changes, you need to execute this.chart.resize() Dynamically adjust the size of the chart, an error occurs:

2. Error reason

Use proxy in vue3 to monitor the response, this.chart will It is converted into a responsive object inside vue, so that it cannot be obtained during resize

coordSys.type

3. Solution

Refer to the official:

You can exit selectively Default deep reactive/read-only transformation mode and embed raw, unproxied objects in statecharts. They can be used flexibly according to the situation:

• Some values ​​should not be reactive, such as complex third-party class instances or Vue component objects.

• Skipping proxy conversions can improve performance when rendering large lists with immutable data sources.

So when instantiating echart, just specify it as non-responsive.

import { markRaw } from 'vue'
this.chart = markRaw(echarts.init(document.getElementById(this.id)))

The above is the detailed content of How to solve the pit Cannot read properties of undefined (reading 'type') encountered by vue3+echart5. For more information, please follow other related articles on the PHP Chinese website!