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