橙色风格大屏看板模板：从零到上线

本项目是一套基于 ECharts 的深色橙风大屏模板，支持“指标卡数值隐藏/显示”功能、响应式栅格布局，以及多类可视化组件（表格、折线、柱线混合、玫瑰图、堆叠柱）。本文将帮你从快速预览到定制与上线部署。

点击可线上预览
点击可线上预览
点击可线上预览

1. 快速开始

进入项目目录：d:\测试\大屏看板模板集\大屏看板模板1-橙色风
启动本地服务（建议 Python 简易静态服务）：
- python -m http.server 5500
浏览器打开：http://localhost:5500/

如需更换端口，修改命令中的 5500 即可。

2. 目录结构

index.html：页面骨架与面板容器（标题、指标卡、图表区域等）
assets/styles.css：主题样式、网格布局、表格与卡片风格、数值隐藏的模糊效果
assets/main.js：数据填充与 ECharts 初始化逻辑、数值隐藏开关、图表刷新

3. 主要功能概览

橙色主题与暗背景，契合大屏夜景风格。
面板包含：
- 二级分类票数（表格）
- 指标概览（多行指标卡）
- 二级分类分布（玫瑰图）
- 拆后收入趋势（折线图）
- 拆后收入 vs 折扣率（柱线混合图）
- 各场景收入（堆叠柱图）
数值隐藏/显示：点击右上按钮切换，表格、指标卡、坐标与 Tooltip 同步“打码”。
自适应布局：按视口比例填充，窄屏自动切换为单列排布。

4. 修改标题与文案

在 index.html 顶部标题位置搜索：

<div class="title">户橙风-大屏看板-模板</div>

直接替换为你的项目名称即可。

5. 数据定制（assets/main.js）

在 assets/main.js 中，将示例数据替换为你的真实业务数据：

// 表格：二级分类票数
const tableData = [
  { name: '其他大型项目', value: 72171 },
  // ...
];

// 月度
const months = ['2024-01', '2024-02', /* ... */];
const incomeMonthly = [123752, 134188, /* ... */];
const discountRate = [0.35, 0.28, /* ... */];

// 玫瑰图：分类分布
const roseData = [
  { name: '市区商圈', value: 18 },
  // ...
];

// 场景堆叠柱
const stackedCats = ['CBD', '市区', '城郊'];
const stackedSeries = [
  { name: '餐饮', data: [320, 280, 150] },
  // ...
];

修改完成后刷新浏览器即可看到新数据。

6. 数值隐藏策略

页面右上按钮控制：隐藏数值/显示数值。
实现原理：
- 样式层对 .kpi-value 与表格数值 .num 添加模糊效果：
```
body[data-hide='true'] .kpi-value,
body[data-hide='true'] .data-table .num { filter: blur(6px); }
```
- 脚本层在坐标与 Tooltip 中返回 ***，避免泄露具体数值。
默认隐藏：将 assets/main.js 中的 let hideNumbers = false; 改为 true。

7. 布局与主题调整（assets/styles.css）

栅格比例：

.grid {
  grid-template-columns: minmax(320px, 1.15fr) minmax(420px, 1.5fr) minmax(320px, 1.15fr);
  grid-template-rows: repeat(2, minmax(320px, 1fr));
  height: calc(100vh - 72px);
}

如需扩大中间列，可把 1.5fr 调大，例如 1.8fr。

间距与边距：通过 CSS 变量控制，随分辨率自适应：

:root { --gap: clamp(12px, 1.6vw, 24px); --pad: clamp(12px, 2vw, 24px); }

主题色：

:root { --accent: #ff9f3f; --accent-2: #ffcc7a; /* 可按需替换 */ }

8. 新增指标卡或图表

新增一行指标卡（在 index.html 的“指标概览”面板内追加块）：

<div class="kpi-row">
  <div class="kpi-card">...</div>
  <div class="kpi-card">...</div>
  <div class="kpi-card">...</div>
</div>

新增图表步骤：
1. 在 index.html 添加图表容器 <div id="chart-xxx" class="chart"></div>。
2. 在 assets/main.js 新建初始化函数 initXxxChart() 并在 init() 中调用。
3. 根据需要组织数据与 ECharts 配置项。

9. 部署上线

静态托管：将整个文件夹部署到任意静态服务器（如 Nginx、Apache 或对象存储）。
CDN 依赖：本模板使用 ECharts CDN（jsDelivr）。
- 如需内网/离线环境，建议将 ECharts 包下载到本地并改为本地引用。

10. 常见问题排查

页面没有“铺满”：检查 .grid 是否设置了 height: calc(100vh - 72px)，以及各 .panel 的 height: 100%。
图表不显示：确认容器 class="chart" 有有效高度；浏览器控制台是否有加载错误。
数值仍可见：确认 body 是否含 data-hide='true'，或脚本中的 hideNumbers 是否为 true。
CDN 加载失败：切换网络或改为本地 ECharts 资源。

11. 下一步

替换为你的真实业务数据与文案。
如需更多面板或联动交互（筛选、钻取、刷新），可以在现有结构上继续扩展，我可协助完成二次开发。

反馈与改进：如果你有期望的配色、比例或模块布局，告诉我目标效果图或参数，我会尽快调整至完全匹配你的视觉规范。