管理端开发日记⑥：数据大屏与首页数据分析
管理端首页回答“今天发生了什么”，数据大屏回答“整体运营得怎么样”。两者都展示数据，却面向不同观看距离、使用频率和决策场景。
1. 首页指标卡
首页 src/views/index.vue 展示今日订单、待审核、待调度、飞行中、已完成和异常订单六项指标。指标不只是一排数字，它们对应每天最常见的管理动作。
const metrics = computed(() => [ { key: 'todayTotal', label: '今日订单', value: stats.value.todayTotal }, { key: 'pendingAudit', label: '待审核', value: stats.value.pendingAudit }, { key: 'waitDispatch', label: '待调度', value: stats.value.waitDispatch }, { key: 'flying', label: '飞行中', value: stats.value.flying }, { key: 'completed', label: '已完成', value: stats.value.completed }, { key: 'exception', label: '异常订单', value: stats.value.exception }])卡片点击后可以携带状态跳转到对应列表，让“发现问题”和“处理问题”之间少一次搜索。
2. 首页图表
首页使用饼图展示状态分布，用折线图展示订单趋势。加载接口后先规范化数值，再更新已有实例：
function upsertChart(el, current, option) { const chart = current || echarts.init(el) chart.setOption(option, true) return chart}复用实例比每次刷新都 echarts.init 更安全，能减少重复 canvas 和事件监听。
3. 固定设计稿如何适配屏幕
运营大屏通常按固定尺寸设计，但实际显示器比例并不完全相同。src/views/data-screen/index.vue 使用 ResizeObserver 监听容器，并计算统一缩放：
const scale = Math.min( containerWidth / DESIGN_WIDTH, containerHeight / DESIGN_HEIGHT)外层容器负责居中，内部画布保持设计尺寸并通过 transform: scale(...) 缩放。这样各面板的相对位置和图表比例不被单独拉伸。
4. 运营驾驶舱的内容层次
运营大屏主要组合：订单总览、完成率仪表盘、订单趋势、平台来源分布、异常概览和航线场景。信息按“总量—趋势—结构—异常—空间”排列。
运营总览 ├─ 总量：订单数、完成数、异常数 ├─ 效率：完成率、平均时长 ├─ 趋势：分时/分日订单变化 ├─ 结构：平台与服务类型占比 └─ 场景：航线与飞行态势大屏不是把所有接口字段都放上去，而是选择站在远处也能迅速判断的指标。字体、颜色和动效都服务于“几秒内读懂”。
5. 用户服务大屏
用户服务页使用折线图呈现投诉趋势，用仪表盘展示满意度。它与运营驾驶舱共用大屏外壳和缩放策略，但指标口径独立。这样既保持统一视觉，又不会把订单效率和用户评价混成一套概念。
6. 初始动画与页面激活
大屏可能被路由缓存。首次进入、从其他页面切回和窗口变化都会影响图表尺寸，所以页面在激活后重新执行 resize，必要时重播强调动画：
function replayHighlight(chart, dataIndex = 0) { chart.dispatchAction({ type: 'downplay', seriesIndex: 0 }) chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex }) chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex })}动画只用于引导视线，不能不停闪烁抢走注意力。
7. 数据口径与空数据
所有展示值先转换为数字，缺失数据用 0 或 --，百分比统一限定范围。趋势数组为空时显示空状态，而不是让坐标轴报错。大屏最怕“画得很满，数字却说不清从哪里来”，因此每个指标都应能追溯到接口字段与统计时间范围。
8. 本篇小结
从接口响应到大屏指标
大屏不直接使用订单明细做所有统计。高频访问的总览指标由后端聚合接口返回，前端只负责格式化；少量临时指标才在已有结果上计算。让浏览器下载全部订单再统计，不仅慢，还可能因权限和分页得到错误口径。
数据刷新时保留旧图，成功后一次性替换模型，避免每个指标先后跳动。若请求失败，则显示最后更新时间和失败提示，而不是把旧数据悄悄当成当前数据。
大屏的性能边界
固定画布缩放、ECharts 动画和地图场景可能同时运行。页面激活时启动，失活时暂停轮播和动画；ResizeObserver 做节流，避免浏览器改变尺寸时连续触发大量 resize。装饰性动画也优先使用 transform 与 opacity，减少布局重排。
首页像值班表，大屏像指挥舱。前者讲究快，后者讲究全局感。把两者的职责分开以后，图表不再只是漂亮背景，而是真的能提醒我：今天到底是订单多，还是问题多。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！