统计分析模块应置于或class="content-area"容器内，作为路由控制的Tab响应区域；采用卡片式布局（）展示核心指标，ECharts图表需设固定高度容器，导出按钮须绑定视图参数并校验权限。
统计分析模块该放在哪个HTML容器里
别用 <div id="stats"> 一塞了事。真实项目里，统计模块得和整个管理系统的导航、权限、数据刷新节奏对齐。它不是独立页面，而是嵌在主内容区里的一个功能区块，通常挂载在 <code><main></main> 或带 class="content-area" 的容器内。如果系统用了左侧菜单 + 顶部Tab导航，统计页就该是其中一个Tab的响应区域，由前端路由（比如Vue Router或原生History API）控制显隐，而不是新开HTML文件。
卡片式布局比表格更合适统计指标
用户进统计页第一眼要扫清关键数字：总订单数、今日活跃用户、异常告警数……这些不是列表数据，不需要排序/分页。用带边框、阴影、图标和小标题的卡片（<article class="stat-card"></article>）堆叠排列，视觉权重清晰。每张卡片只放1个核心指标+趋势箭头+简短说明，避免塞进“环比↑12.3%”这种带小数的浮夸文案——后端返回整数，前端用JS补零即可，别让CSS去对齐小数点。
- 卡片宽度建议设为
calc(25% - 1rem)（四列流式），屏幕小于768px时自动切为两列 - 不要给卡片加hover放大动效，管理后台不是营销页，干扰操作
- 指标数值用
<span class="stat-value"></span>包裹，字体加粗，字号比说明文字大1.5倍
ECharts图表容器必须设固定高度
echarts.init() 初始化失败最常见的原因，就是父容器没有明确高度。别信“height: auto”或“min-height”，ECharts需要计算像素值。给图表外层套一层 <div class="chart-container">，里面再放 <code><div id="sales-chart">，然后CSS写死：<code>.chart-container { height: 400px; }。如果要响应式，用JS监听窗口resize后调用 myChart.resize()，而不是靠CSS媒体查询撑高容器。
- 多个图表并排时，用Flex布局，别用float——IE11已淘汰，无需兼容
- 时间范围筛选器（如“最近7天”）要和图表DOM同级，且用
data-range="7d"这类属性传参，方便JS读取 - 加载中状态直接在
<div id="sales-chart"> 内置 <code><div class="loading">加载中…</div>，数据就绪后再myChart.setOption()导出按钮位置和行为必须统一
统计页的“导出Excel”按钮不能随便扔在右上角。它得和当前视图强绑定：导出的是卡片汇总数据？还是下方某张图表的原始数据？还是筛选后的明细表？按钮文案必须写清，比如“导出近30天销售明细”，而不是“导出数据”。点击后应发起带参数的GET请求：
/api/stats/export?range=30d&type=sales_detail，后端生成临时文件并返回下载URL，前端用window.location.href触发下载。别用AJAX+Blob，管理后台用户大概率用Chrome，但IE11残留场景下Blob不兼容。立即学习“前端免费学习笔记（深入）”；
容易被忽略的是权限校验——导出接口必须校验当前用户是否有
export:stats权限，且后端生成的文件名要带时间戳和用户ID，防止缓存污染或越权访问。
