关于vue3:vue3使用echarts5封装组件无法显示

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

// 曲线组件
<template>
  <div
    :id="CurveList.DatasList.id"
    style="width: 36rem; height: 20rem"
    class="Qu"
  ></div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted } from "vue";
import * as echarts from "echarts";

export default defineComponent({
  name: "Curve",
  props: {
    Datas: {
      type: Object
    }
  },
  setup(props) {
    const CurveList = reactive({
      DatasList: props.Datas
    });
    // console.log(CurveList.DatasList);
    // console.log(CurveList.DatasList?.con);
    // console.log(CurveList.DatasList?.id);
    const Xdata: any[] = CurveList.DatasList?.Xdata;
    const lineData1: any[] = CurveList.DatasList?.lineData1;
    const lineData2: any[] = CurveList.DatasList?.lineData2;
    const lineData3: any[] = CurveList.DatasList?.lineData3;
    const option = reactive({
      title: {
        text: "曲线显示"
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: Xdata,
        axisLine: {
          itemStyle: {
            lineStyle: {
              color: "#000",
              width: 1 //这里是为了突出显示加上的
            }
          }
        }
      },
      yAxis: {
        type: "value",
        splitLine: {
          lineStyle: {
            // 应用深浅的距离色
            color: ["#000"]
          }
        },
        nameTextStyle: {
          color: ["#000"]
        },
        axisLine: {
          lineStyle: {
            color: "#000",
            width: 1 //这里是为了突出显示加上的
          }
        }
      },
      series: [
        {
          type: "line",
          data: lineData1,
          itemStyle: {
            lineStyle: {
              color: "#FF0033"
            }
          },
          showSymbol: false
        },
        {
          type: "line",
          data: lineData2,
          itemStyle: {
            lineStyle: {
              color: "#0099FF"
            }
          },
          showSymbol: false
        },
        {
          type: "line",
          data: lineData3,
          itemStyle: {
            lineStyle: {
              color: "#3CC4A9"
            }
          },
          showSymbol: false
        }
      ]
    });
    onMounted(() => {
      const QuDom = document.getElementById(
        CurveList.DatasList?.id
      ) as HTMLElement;
      console.log(QuDom);
      const myChart = echarts.init(QuDom);
      myChart.setOption(option);
    });
    return {
      CurveList
    };
  }
});
</script>

<style lang="stylus" scoped></style>

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

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

<Curve :Datas="Datas" />

//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.本期的分享到了这里就完结啦,心愿对你你有所帮忙,让咱们一起致力走向巅峰