Skip to content

finance-trading

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

finance-trading

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
index.html
index.html
 
 

README.md

金融市场实时监控中心

专业级交易大屏示例，展示 anyviz 设计系统在金融监控场景中的应用。

场景与用途

这是一套完整的金融市场实时监控大屏，目标用户为：

  • 交易员、基金经理、风险管理部门
  • 交易大厅、控制中心、监控室
  • 实时市场分析与决策支持

大屏以深色科技感设计、高信息密度、多维度协联的图表协同，实现对市场整体态势、板块资金流、个股表现、市场情绪的一站式监控。

技术栈

  • 前端框架：纯 HTML5 + CSS3 + JavaScript（无构建步骤）
  • 图表库：ECharts 5.5.1（CDN 引入）
  • 响应式设计：CSS Grid + ResizeObserver / window.resize 事件
  • 渲染器：Canvas（高性能）
  • 浏览器兼容性：Chrome 90+、Firefox 88+、Safari 14+

包含的图表与数据

顶部 KPI 卡片区（4 个指标）

  1. 上证指数 — 实时点位、涨跌幅、迷你 sparkline 趋势
  2. 深证成指 — 深市主指数
  3. 沪深300 — 宽基指数（跌幅展示）
  4. 日成交额 — 市场总成交量

主图表区（3 列布局）

  1. K线图（Candlestick）

    • 60日日线数据
    • MA5、MA10、MA20 三条均线
    • 下方成交量柱状图（涨红跌绿）
    • DataZoom 控件

  2. 实时指数分时走势（多线面积图）

    • 上证、深证、沪深300 三指数对比
    • 渐变面积填充
    • 4小时交易时段数据（240条）

  3. 板块资金流向（横向条形图）

    • 6大板块（金融、地产、科技、消费、制造、能源）
    • 红绿双向（流入为红、流出为绿）
    • 标签显示金额

行业热力图（Treemap）

  • 12个行业板块
  • 按涨跌幅着色（红涨绿跌）
  • 面积表示权重

下方四宫格

  1. 涨跌停统计（仪表盘） — 市场参与度指标
  2. 北向资金日内净流入（双向柱状图） — 外资流向
  3. 行业涨幅 TOP 10（横向条形图） — 强势行业排名
  4. 市场参与度指标（混合图） — 成交量+参与度趋势

运行方式

  1. 用浏览器直接打开 index.html 文件（无需本地服务器）

    open index.html
# 或
firefox index.html

  2. 或在 Web 服务器上访问：

    python3 -m http.server 8000
# 访问 http://localhost:8000/index.html

  3. 自适应大屏：设计基于 1920×1080 但响应式适配各分辨率

    • 通过 CSS Grid 和 ResizeObserver 自动调整
    • 可全屏展示（F11）

设计系统——anyviz 品牌应用

深色大屏背景

  • 页面底色：#03050C（极深蓝黑）
  • 面板卡片：#0b0f1a 或 rgba(255,255,255,0.02)（微亮）
  • 面板圆角：12px
  • 面板描边：1px rgba(255,255,255,0.06)（极淡白）
  • 光晕效果：box-shadow: 0 0 20px rgba(66, 105, 208, 0.05)

品牌色板（按优先级，严格遵守顺序）

色值 名称 用途
#4269d0 蓝 主色、均线、参考线
#3ca951 绿 跌、流出、次要对比
#ff725c 珊瑚红 涨、流入、警示
#a463f2 紫 强调、特殊指标
#efb118 琥珀 辅助强调、数据标记
#6cc5b0 青 辅助对比、冷色调

金融场景色规约

  • 涨幅：红色 #ff725c（中国习惯）
  • 跌幅：绿色 #3ca951
  • 流入资金：红色
  • 流出资金：绿色

文字排版

  • 字体栈：'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif
  • 等宽数字：'Menlo', 'Monaco', monospace
  • 标题：16px / 600 weight
  • 大数字（KPI）：28-40px / 700 weight
  • 刻度标签：10-11px
  • 主文字颜色：#F8FAFC（高对比）
  • 次要文字：#9696a0（柔和灰）

细节设计元素

  • 渐变：线性渐变用于面积填充、标题、光晕边框
  • 发光：克制的 box-shadow 辉光（0.05 ~ 0.1 透明度）
  • 动画：
    • 实时时钟 1秒刷新
    • LIVE 红点 1.5秒闪烁脉冲
    • 图表交互反应灵敏

一致性检查清单

  • 所有面板卡片圆角统一 12px
  • 所有描边颜色统一 rgba(255,255,255,0.06)
  • 背景色：页面 #03050C，面板 #0b0f1a 或微透明
  • 品牌色仅用：蓝、绿、红、紫、琥珀、青（6色）
  • 金融场景：涨=红、跌=绿（无例外）
  • 文字对比度 >= 4.5:1（WCAG AA）
  • 标题字重 600-700
  • 数字采用等宽字体
  • 所有图表标题左侧有 3px 蓝-青渐变竖线
  • KPI 卡片左悬停微亮（border-color 提升）
  • dataZoom、tooltip 样式与深色主题适配
  • 响应式断点无遗漏（1920、1600、1200px）

数据说明

所有数据为模拟生成，在浏览器 JavaScript 中随机生成，具有真实感但不涉及真实市场数据：

  • K线：60日历史（随机游走）
  • 分时：240条 intraday 数据（4小时交易时段）
  • 资金流：模拟板块流向
  • 行业涨跌幅：在 -3% ~ +3.5% 范围随机
  • 北向资金：模拟日内整点流入/流出

可在 createCandlestickChart() 等函数中替换为真实 API 数据。

性能优化

  • ECharts Canvas 渲染：高性能绘制 8 个图表
  • DirtyRect 模式：只重绘变化区域
  • ResizeObserver：高效响应窗口大小变化
  • CDN 加速：jsdelivr 全球分发

扩展指南

接入真实数据

// 替换 genCandleData() 的模拟数据
const realData = await fetch('/api/kline?symbol=000001&period=D&count=60').then(r => r.json());

添加自定义主题

编辑 :root CSS 变量，或在 colors 对象中追加新色：

const colors = {
  // ... 保留既有品牌色
  customColor: '#xxddcc',
};

集成第三方告警系统

在 updateClock() 或定时函数中添加事件发射：

setInterval(() => {
  if (某指标 > 阈值) {
    ws.send({ type: 'alert', level: 'warning', msg: '...' });
  }
}, 5000);

浏览器测试状态

浏览器 版本 状态
Chrome 90+ ✅ 完美
Firefox 88+ ✅ 完美
Safari 14+ ✅ 完美
Edge 90+ ✅ 完美

文件清单

finance-trading/
├── index.html          # 954行 完整大屏（单文件）
├── README.md           # 本文件
└── (无其他依赖)

关于 anyviz

anyviz 是 AI 原生数据可视化规范库，本示例严格遵循其设计系统、色板、无障碍标准与模板规范。详见：

创建时间：2026年6月
许可证：MIT
示例类型：大屏 / 仪表板 / 金融场景