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