vue3使用echarts5封装组件,无法显示

1.开发环境 vue3+echarts5
2.电脑系统 windows10专业版
3.在使用vue3+echarts5开发的过程中,我们根据项目的需要有时候需要封装一些组件,下面我来分享一下如何实现。
4.废话不多说,直接上代码:

// 曲线组件

5.在对应的组件中使用:

//导入组件
import Curve from "@/components/Curve.vue";

//setup下数据
const Datas = reactive({
      Xdata,
      lineData1,
      lineData2,
      lineData3,
      id: "Curveid",
      con: "我是父组件,在曲线组件显示对应的内容"
    });

6.效果如下:

//检查dom元素

//有宽高,那怎么不出来呢?你是不是困惑了?

7.解决方法:

//使用异步组件

vue3使用defineAsyncComponent定义异步组件,用法如下:

//导入异步组件
import {
  defineComponent,
  defineAsyncComponent, //异步组件
} from "vue";

//注掉之前的引入组件方法,替换为
 components: {
    Curve: defineAsyncComponent(() => import("@/components/Curve.vue")),
    // Curve,
  },

7-1.效果如下:

8.本期的分享到了这里就结束啦,希望对你你有所帮助,让我们一起努力走向巅峰