后台骨架好了这篇写打开后台第一眼看到的页面仪表盘。8 张指标卡 1 张饼图一天的工作量。看板展示什么先定指标再写代码指标选择的原则运营每天要做的决策倒推要看的数据。今日营收 / 累计营收 —— 今天生意怎么样今日订单 / 累计订单 / 用户数 / 司机数 / 待审核司机数 —— 各条线健康度7 日订单状态分布 —— 有没有单子卡在某个状态比如大量 PENDING 运力不足后端一个聚合接口全给了publicOverviewRespoverview(){returnOverviewResp.builder().todayRevenue(orderMapper.sumTodayRevenue()).todayOrders(orderMapper.countToday()).pendingDrivers(driverMapper.countByStatus(0)).weekStatusDist(orderMapper.countWeekGroupByStatus())// List{status, cnt}.build();}SQL 都是GROUP BY一句话的事别在 Java 里循环查库见过有人查出全表再 stream 分组——数据量一上去看板就是慢查询现场。ECharts 饼图封装成组件的克制版template div refchartEl styleheight: 320px/div /template script setup import * as echarts from echarts import { onMounted, ref } from vue const props defineProps({ data: Array }) // [{name:待接单, value:12}, ...] const chartEl ref() onMounted(() { const chart echarts.init(chartEl.value) chart.setOption({ tooltip: { trigger: item }, series: [{ type: pie, radius: [40%, 70%], label: { formatter: {b}: {c}单 }, data: props.data }] }) }) /script状态文案映射PENDING → 待接单做成前端常量表订单状态这种枚举翻译永远不该散落在模板里。两个加分细节待办数字要醒目待审核司机 3做成红色角标挂在侧边栏入口上运营不用主动找活看板数据加时间条件营收类指标全部带今日/7日维度别只给累计值——累计数好看但没决策价值趋势才有本篇成果仪表盘完成8 张指标卡 七日订单状态饼图打开后台 3 秒看清全局。到这里三端全部开发完毕。下篇写三端联调与真机测试——代码写完只是 60 分跑通整条业务流才是 90 分。