在日益复杂的电商数据分析场景中，我们需要在有限的页面空间内展示丰富且直观的信息。本文将带你通过业务、技术和组件设计的完美结合，来实现一个带有迷你趋势图和可展开详细视图的 <vxe-table> 列组件，为你的数据展示增色不少。

---

业务背景

通过一个 "天维度趋势图" 的设计，帮助我们的产品在有限的界面了解一些趋势，更棒的是，悬浮趋势图还能弹出详细视图，为产品开品提供支持。

---

技术亮点

我们使用以下技术栈实现了这个组件：

1. vxe-table：为灵活的表格展示提供支持。

2. echarts：用于实现趋势图。

3. Element Plus：增强用户交互，特别是弹出框和悬停效果。

4. Vue3 + TypeScript：让开发更加严谨和高效。

---

实现步骤

1. 迷你趋势图 + 弹出视图

使用 <el-popover> 来实现迷你趋势图的悬浮和弹出功能：

<vxe-column field="dayTrendView" title="天维度趋势图" min-width="120px" align="center"> 
  <template #default="{ row }">
    <el-popover placement="right" :width="500" trigger="hover">
      <template #reference>
        <!-- 小型趋势图 -->
        <LineChart
          :dates="reversedDateList"
          :sales="row.reverseSalesData"
          :width="110"
          :height="100"
        />
      </template>
      <!-- 弹出的大型趋势图 -->
      <div>
        <LineChart :dates="reversedDateList" :sales="row.reverseSalesData" />
      </div>
    </el-popover>
  </template>
</vxe-column>

效果描述：

• 表格中展示迷你趋势图，轻量化设计提升用户体验。

• 悬浮触发弹框，显示更大更详细的趋势图。

---

2. 自定义趋势图组件

我们封装了一个 LineChart 组件，支持多尺寸渲染和详细视图切换。

核心代码：

<template>
  <div class="chart-container" ref="chartRef" @click="openDialog" :style="`width:${realWidth};height:${realHeight};`">
    <div class="chart"></div>
    <el-dialog :visible.sync="dialogVisible" title="销量图" @close="dialogVisible = false">
      <div ref="dialogChartRef" :style="`width:${dialogWidth};height:${dialogHeight};`"></div>
    </el-dialog>
  </div>
</template>

数据驱动的灵活性：

通过以下 props，我们为趋势图提供了高灵活性：

• dates：X轴日期。

• sales：Y轴销量。

• width 和 height：迷你图的尺寸。

• dialogWidth 和 dialogHeight：弹出图的尺寸。

使用 echarts 绘制图表：

const renderChart = (element: HTMLElement | null) => {
  if (element && chartInstance) {
    chartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        formatter: (params: TooltipParam[]) => {
          const firstParam = params[0];
          return `${firstParam.name}<br/>销量: ${firstParam.value}`;
        },
      },
      xAxis: { type: 'category', data: props.dates },
      yAxis: { type: 'value' },
      series: [
        {
          type: 'line',
          data: props.sales,
          smooth: true,
          lineStyle: { color: '#5470C6' },
        },
      ],
    });
  }
};

---

3. 页面交互与细节优化

• 悬浮效果：通过 hover 触发 el-popover，保证用户不会误操作。

• 动态尺寸调整：根据业务场景调整趋势图大小，兼顾布局美观。

• 样式细节：

chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

---

技术难点与分享

1. 动态图表刷新

当数据量较大时，echarts 渲染可能会导致性能瓶颈。通过 nextTick 确保图表实例化后动态刷新：

nextTick(() => {
  if (dialogChartRef.value) {
    chartInstance = echarts.init(dialogChartRef.value);
    renderChart(dialogChartRef.value);
  }
});

2. 销量数据的格式化

根据业务需求，格式化销量数据，避免浮点数问题：

const formatSalesData = (sales: number[]): number[] =>
  sales.map((value) => Math.round(value));

3. 小趋势图的数据反转

由于某些业务要求显示最新数据靠左，我们处理了日期和销量数据的顺序：

const reversedDateList = [...dates].reverse();
const reverseSalesData = [...sales].reverse();

---

业务场景与价值

1. 电商分析场景

该组件能快速帮助商品管理者发现潜在问题，例如销量异常波动。

2. 数据可视化场景

在复杂表格中内嵌趋势图，既节省空间，又提升了数据展示的直观性。

3. 可扩展性

该设计支持与任意业务字段结合，例如每日订单量、退货量等。

使用步骤

1. 安装依赖

   • 安装 echarts 组件：

     npm install echarts 

2. 创建 Vue 组件

   • 编写 LineChart 组件，用于展示折线图和趋势图。

3. 配置前端代码

   • 在页面中引入 <LineChart> 组件。
   • 使用 <vxe-column> 配置列，并嵌入小趋势图。

4. 后端数据准备

   • 编写接口返回日期和销量数据格式，例如：

     { "dates": ["2024-11-01", "2024-11-02", "2024-11-03"], "sales": [120, 130, 125] } 

5. 前端调用接口

   • 在 Vue 页面中通过 axios 或其他请求工具获取后端数据，并动态绑定到组件中。

6. 调试与优化

   • 确保折线图在 hover 时展示正确的 tooltip。
   • 调整小趋势图和弹窗大图的样式和交互效果。

7. 部署与验证

   • 将代码部署至测试环境，验证展示效果及数据准确性。