从零搭建期权波动率曲面可视化网站：FastAPI + Vue 实战

为什么做这个项目？

使用者痛点：

• 国内主流行情软件只能提供期权行情，隐含波动率可视化几乎不存在。
• 没有波动率曲面、IV Smile、期限结构对比等关键分析图表。
• 国外专业工具收费昂贵且不支持国内 A 股/期货期权数据。
• 量化爱好者缺少一个开源、即装即用、本地运行的完整分析网站。

工具——option-platform。

先看效果

项目运行后你会得到这样一个全栈程序：

页面	功能
Dashboard	数据总览面板，实时快照
行情页	期权合约买卖盘口、最新价格
波动率曲面页	3D 交互式曲面支持旋转缩放；IV Smile 隐含波动率偏度曲线；期限结构不同到期日 IV 走势；K线图表标的期货/ETF 历史 K 线。怎么说呢，
合约详情页	B‑S 定价 + Greeks 全量输出

技术选型

前端：Vue + Vite + Element Plus + ECharts
后端的观点是。FastAPI + Python
至于数据，AKShare
说到存储，SQLite
说到部署，uvicorn + Nginx

Pain Point：传统 Flask 项目在高频轮询场景下容易出现阻塞，而 FastAPI 原生 async 支持、自动 OpenAPI 文档还有 Pydantic 校验，解决问题了“接口慢/调试繁琐”的痛点。

• 原生 async，适合高频轮询。
• 自动生成 OpenAPI 文档，无需额外工具调试。
• Pydantic 模型校验，降低边界条件 bug 概率。

Pain Point：React 在处理复杂状态时代码膨胀，Vue 的组合式 API 更加轻盈易维护。

关键技术拆解

. B‑S 定价引擎

纯 Python 实现，零外部依赖，主要代码不到 50 行：

from dataclasses import dataclass
import math
from typing import Optional
@dataclass
class BSParams:
S: float # 标的现价
K: float # 行权价
T: float # 到期时间
r: float = 0.03 # 无风险利率
sigma这方面。float = 0.2 # 波动率
def bs_price -> float:
"""计算期权理论价格"""
d1 = + * params.T) \
/ )
d2 = d1 - params.sigma * math.sqrt
if option_type == "call":
return params.S * norm_cdf - params.K * math.exp * norm_cdf
说到else，return params.K * math.exp * norm_cdf - params.S * norm_cdf
def bs_greeks -> dict:
"""计算 Greeks: Delta,Gamma,Vega,Theta,Rho"""
# ... 完整实现见项目代码
return {}

Pain Point：The Greeks 在大多数开源示例里只是公式搬运，这里结合实时行情做到毫秒级更新，实现了“Greeks 不随时变动就失去意义”的需求。

. 数据采集层

使用 AKShare 对接国内期权行情：

# data_service.py 主要原因
import akshare as ak
import pandas as pd
def fetch_option_chain -> pd.DataFrame:
"""获取期权合约链并计算隐含波动率"""
df = ak.stock_option_contract_info_em
# 数据清洗 + 合并 + 隐含波动率计算
return df

Pain Point：A 股/深交所/中金所的原始数据格式不统一，需要自行清洗。这里解决了“行权价单位混乱、到期日格式不统一”的痛点，使得后续模型能够直接使用干净的数据。

. 3D 波动率曲面渲染

前端使用 Canvas+CSS3D 实现投影与交互：

// Surface3D.vue

曲面数据格式示例：

{
"expiries":,"strikes":,"iv_matrix":,...
]
}

The backend reads historical IV from SQLite and sends latest matrix to front end for real‑time rendering.

. 自动轮询与数据修复

后台使用 asyncio 每隔几秒拉取最新行情并写入数据库。同时进行异常检测：

# main.py
import asyncio
from contextlib import asynccontextmanager
@asynccontextmanager
async def lifespan:
app.state.task = asyncio.create_task)
yield
app.state.task.cancel
async def poll_data_loop:
while True:
await asyncio.sleep # 每5秒轮询一次
await fetch_and_update
await detect_and_fix_anomalies

Pain Point：Lack of automated data hygiene in existing tools leads to stale or erroneous IV curves. 本项目和自动修复流程，让曲面保持可信度。

项目架构概览

option-platform/
├── backend/
│ ├── main.py # FastAPI入口 & 生命周期管理
│ ├── bs_model.py # B‑S定价 & Greeks实现
│ ├── data_service.py # AKShare 数据采集 & 清洗
│ ├── iv_store.py # SQLite存储层
│ └── models.py # Pydantic模型定义
├── frontend/
│ ├── src/views/ # 页面组件
│ ├── src/components/ # Surface3D.vue 等通用组件
│ └── src/utils/ # 工具函数
└── README.md # 项目说明文档

The front‑end and back‑end communicate via RESTful APIs;Swagger UI is available at /docs.

本地运行步骤

# 克隆仓库并进入目录
git clone https://github.com/Marvelous-dot/option-platform.git
cd option-platform
# ---------- 后端 ----------
cd backend
pip install -r requirements.txt # Python>=3.9 推荐使用虚拟环境
# 初始化数据库
python run.py && echo "后端已启动"
# ---------- 前端 ----------
cd ../frontend
npm install # 安装依赖
npm run dev # 启动 Vite 开发服务器
# 浏览器访问 http://localhost:5173 即可看到网站首页。# 若想生产部署，请参考 README 中的 Docker / Nginx 示例。

Pain Point：No complex Docker 环境或云服务依赖。只需要本机 Python 与 Node 环境即可快速启动，实现“一键跑通”。

写在最终 —— 收获

This project turned an idea into a usable full‑stack quantitative tool within two weeks. The biggest gain was not just mastering FastAPI + Vue + Canvas，而是第一次真正从"零"搭建起一个完整的量化可视化程序。按理说，

• 计划加入更多品种
• 引入策略回测模块
• Docker 一键部署
• M​obile 响应式适配
• K线+希腊字母联动展示

If you are also working on options or interested in quantitative visualisation。feel free to star repo and raise issues:

。

---