MarsMgn

外观

首页 ​

image-20250626094455295

首页 ​

介绍 ​

首页页面实现了一个数据展示首页，包含：

  • 四个统计卡片（用户、消息、交易额、购物数），带图标和动态数字增长效果；
  • 一个饼图（用户来源）、柱状图（周活跃度）和折线图（月销售额）；
  • 使用 el-skeleton 实现加载动画；
  • 图表通过 ECharts 封装组件渲染，并通过异步方法模拟数据加载。

代码：src\views\Home\Index.vue

vue
<template>
  <el-row :class="prefixCls" :gutter="20" justify="space-between">
    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
                >
                  <Icon :size="40" icon="svg-icon:peoples" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
                  >{{ t('analysis.newUser') }}
                </div>
                <CountTo
                  :duration="2600"
                  :end-val="102400"
                  :start-val="0"
                  class="text-right text-20px font-700"
                />
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>
...

图表展示 ​

使用自定义 ECharts 封装组件渲染饼图、柱状图、折线图

  • 饼图 (PieChart)：显示用户来源分布；
  • 柱状图 (BarChart)：展示一周内每天的活跃度；
  • 折线图 (LineChart**)**：显示每月销售额的变化趋势；
vue
...
  <el-row :gutter="20" justify="space-between">
    <el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" animated>
          <Echart :height="300" :options="pieOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" animated>
          <Echart :height="300" :options="barOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="4" animated>
          <Echart :height="350" :options="lineOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>
  • 每个图表区域都包裹在 el-card 中，并有一个标题头 (slot="header" 定义)；
  • 在数据加载时使用 el-skeleton 显示骨架屏加载动画，提升用户体验；
  • 数据加载完成后切换 loading 状态，显示对应图表。

前置知识 ​

Echarts 入门示例 ​

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够在网页中生成各种精美的图表，非常适合用于前端项目中的数据可视化需求。

下载：在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

使用示例：在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

image-20250612093834081

封装 Echart 图表组件 ​

Echart 组件位于 src/components/Echart 内，对 echarts 进行封装，自适应窗口大小。

  • 只需传入对应的 options 和 height 即可展示图表。
  • Echart 属性
属性说明类型可选值默认值
optionsechart 对应的配置项，详见EChartsOption-[]
width图表宽度string/number--
height图表高度string/number-500
vue
<el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
  <el-card class="mb-20px" shadow="hover">
    <el-skeleton :loading="loading" animated>
      <Echart :height="300" :options="pieOptionsData" />
    </el-skeleton>
  </el-card>
</el-col>

DOM介绍 ​

DOM（Document Object Model，文档对象模型）是前端开发中一个非常重要的概念。它是一种用于表示和操作 HTML 或 XML 文档的标准编程接口，允许开发者通过 JavaScript（或其他编程语言）动态地访问和修改文档的内容、结构和样式。

DOM 将 HTML 文档表示为一个树形结构，其中每个节点代表文档中的一个元素、属性或文本。常见的节点类型包括：

  • 文档节点（Document Node）：表示整个文档的根节点。
  • 元素节点（Element Node）：表示 HTML 中的标签（如 <div>、<p> 等）。
  • 文本节点（Text Node）：表示元素中的文本内容。
  • 属性节点（Attribute Node）：表示元素的属性（如 id、class 等）。
  • 注释节点（Comment Node）：表示 HTML 中的注释内容。

例如，以下 HTML 文档：

html
<!DOCTYPE html>
<html>
<head>
    <title>DOM 示例</title>
</head>
<body>
    <div id="container">
        <p>这是一个段落。</p>
    </div>
</body>
</html>

其对应的 DOM 树结构大致如下：

sh
Document
  └── html
        ├── head
        │     └── title
        │           └── "DOM 示例"
        └── body
              └── div (id="container")
                    └── p
                          └── "这是一个段落。"

参考资料 ​