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.效果如下:
image.png

//检查dom元素

image.png

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

7.解决方法:

//使用异步组件

vue3使用defineAsyncComponent定义异步组件,用法如下:
//导入异步组件
import {
  defineComponent,
  defineAsyncComponent, //异步组件
} from "vue";
//注掉之前的引入组件方法,替换为
 components: {
    Curve: defineAsyncComponent(() => import("@/components/Curve.vue")),
    // Curve,
  },

7-1.效果如下:
image.png
8.本期的分享到了这里就结束啦,希望对你你有所帮助,让我们一起努力走向巅峰

阅读 132

吾不是什么大佬,在这个领域我从未想赢,只是不甘认输。生活再平凡,也是限量版,让我们走出不一样的人生,活...

134 声望
5 粉丝
0 条评论
你知道吗?

吾不是什么大佬,在这个领域我从未想赢,只是不甘认输。生活再平凡,也是限量版,让我们走出不一样的人生,活...

134 声望
5 粉丝
文章目录
宣传栏