data-marketing-platform/src/views/home/index.vue

<template>
  <el-row :gutter="12" style="padding: 12px; row-gap: 12px;">
    <el-col :xs="24" :sm="10" :md="8" :lg="6" :xl="5">
      <userInfo />
    </el-col>
    <el-col :xs="24" :sm="24" :md="16" :lg="10" :xl="10">
      <custom-panel :title="'访客趋势图'">
        <visitor-trend />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="9">
      <custom-panel :title="'引用域'">
        <traffic-sources />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
      <custom-panel :title="'访客地图'">
        <visitor-overview />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="24" :md="10" :lg="6" :xl="6">
      <custom-panel :title="'访客概览'">
        <visitor-overview />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="24" :md="14" :lg="8" :xl="8">
      <custom-panel :title="'关键词频率'">
        <keyword-frequency />
      </custom-panel>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="home">
import { defineAsyncComponent,ref } from 'vue';

const customPanel = defineAsyncComponent(() => import('./custom-panel.vue'));
const userInfo = defineAsyncComponent(() => import('./user-info.vue'));
const visitorTrend = defineAsyncComponent(() => import('./visitor-trend.vue'));
const trafficSources = defineAsyncComponent(() => import('./traffic-sources.vue'));
const VisitorOverview = defineAsyncComponent(() => import('./visitor-overview.vue'));
const keywordFrequency = defineAsyncComponent(() => import('./echarts/keyword-frequency.vue'));
</script>