echart报错Cannot read properties of undefined (reading ‘type‘)

This is the error I encountered with vue3+echart5: Cannot read properties of undefined (reading 'type')

This question requires two key approaches:

toRaw:
Function: Convert a reactive object generated by reactive to a normal object.

scenes to be used:

It is used to read the ordinary object corresponding to the responsive object. All operations on this ordinary object will not cause page updates.

markRaw:
Role: mark an object so that it will never be a responsive object again.

Application Scenario:

Some values ​​should not be set reactive, such as complex third-party libraries, etc.

Skipping reactive transformations can improve performance when rendering large lists with immutable data sources.

1.第一步在所在的组件引入
import { markRaw } from 'vue'
 
2.第二步初始化
 
initChart() {
      //   初始化
      this.chartInstance = markRaw(this.$echarts.init(this.$refs.rank_ref))//获取dom元素
      const initOption = {
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },