广告平台数据大屏的架构设计与性能优化实践

一、项目背景

广告平台的核心指标（曝光量、点击率、转化等）需要实时展示给广告主与运营人员。

我们设计了一个“可定制 + 高性能 + 多图层渲染”的数据大屏，支持：

• 多模块折线图/柱状图/饼图
• 实时数据刷新 + 滚动展示
• 自定义时间范围、指标维度

---

二、大屏整体架构拆解

+---------------------+
|     页面容器 Layout |
+---------------------+
        ↓
+---------------------+   +--------------------+
| 数据模块卡片（Card） | +>  ECharts 图表容器  |
+---------------------+   +--------------------+
        ↓
+------------------------------+
| API 层 + 定时任务 + 缓存机制 |
+------------------------------+

---

三、数据源与接口策略设计

• 所有数据通过统一接口 /api/report/summary 获取
• 接口支持传入时间维度、指标维度：

getDashboardData({ dateType: 'week', metric: 'impression' })

• 后端接口缓存层：避免重复请求压力
• 前端使用 SWR (stale-while-revalidate) 模式定时刷新：

const { data, refresh } = useDashboardFetcher()
setInterval(() => refresh(), 60_000) // 每分钟刷新

---

四、ECharts 封装与懒加载

封装 ChartCard.vue 组件：

<template>
  <n-card title="曝光量趋势">
    <v-chart :option="option" autoresize />
  </n-card>
</template>

<script setup>
const props = defineProps<{ data: any[] }>()
const option = computed(() => ({
  xAxis: { type: 'category', data: props.data.map(d => d.date) },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: props.data.map(d => d.value) }]
}))
</script>

使用懒加载 + IntersectionObserver 提升首屏性能：

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) renderChart()
})

---

五、页面性能优化

1. 分模块懒加载组件（defineAsyncComponent）
2. 缩减图表初始点位，滚动加载历史数据
3. 使用虚拟滚动展示多卡片视图
4. ECharts 图层分离，避免卡顿：开启 svg 渲染模式

const chart = echarts.init(dom, 'light', { renderer: 'svg' })

---

六、主题与样式适配

• 配合 Naive UI 的主题切换逻辑进行适配
• 所有图表样式基于 themeOverrides 驱动

option.color = isDark ? ['#fff', '#ccc'] : ['#000', '#888']

---

七、配置化能力设计（运营自定义指标）

• 支持运营人员通过 JSON Schema 定义展示模块：

{
  "type": "line",
  "title": "点击率趋势",
  "api": "/api/report/clickrate"
}

• 前端根据 schema 动态渲染相应图表模块

---

八、上线效果

• 首页首屏加载时间控制在 1.3 秒内
• 所有图表模块交互延迟低于 80ms
• 平均刷新请求次数降低 60%

---

九、总结

数据大屏不仅是“展示数据”，更是前端架构能力与性能调优的集合体。

我通过统一封装、懒加载、接口优化与配置化设计，打造了一个可复用、可拓展的数据展示系统。这套经验在平台系统中具有很强的迁移性和落地价值。