K 线 - 中国股市 K 线图桌面应用
一款基于 Wails v2 + Vue 3 + ECharts 构建的跨平台股票 K 线分析工具，支持实时查询、交互式图表展示和技术指标分析。
📖 目录
🚀 项目简介
K 线是一款专注于中国 A 股市场的轻量级桌面应用程序。它整合了新浪财经数据接口，提供流畅的 K 线图可视化体验，支持均线叠加显示和交互缩放功能。
核心亮点
- 原生性能：基于 Go 后端，启动速度快，资源占用低
- 跨平台：支持 Windows/macOS/Linux，一套代码多端运行
- 离线缓存：股票字典本地存储，减少网络请求
- 实时更新：直连新浪财经 API，获取最新行情数据
✨ 功能特性
股票查询
- 📝 智能搜索：支持股票代码或名称模糊匹配
- ⚡ 即时联想：输入时自动补全建议列表
- 💾 本地缓存：股票字典持久化存储，首次加载后无需联网
K 线图展示
- 📊 蜡烛图：标准 OHLC（开盘价/最高价/最低价/收盘价）展示
- 📈 技术指标：内置 MA5、MA10、MA30 移动平均线
- 🎯 交叉提示：十字光标精准定位，显示详细数值
交互操作
- 🔍 缩放控制：滑块调节时间范围，鼠标滚轮快捷缩放
- 🔄 刷新数据：一键重新获取最新行情
- 📐 自适应布局：窗口大小变化自动重绘图表
🏗️ 技术架构
整体架构图
┌─────────────────────────────────────────────────────────┐
│ Wails Desktop App │
├──────────────────────────┬──────────────────────────────┤
│ Frontend │ Backend │
│ (Vue.js 3) │ (Go) │
│ │ │
│ ┌──────────────────┐ │ ┌─────────────────────────┐ │
│ │ Element Plus │ │ │ HTTP Client │ │
│ │ UI Components │◄──►│ │ API Integration │ │
│ └──────────────────┘ │ └─────────────────────────┘ │
│ ┌──────────────────┐ │ ┌─────────────────────────┐ │
│ │ ECharts │ │ │ LRU Cache (gcache) │ │
│ │ Chart Engine │ │ │ Data Persistence │ │
│ └──────────────────┘ │ └─────────────────────────┘ │
└──────────────────────────┴──────────────────────────────┘
│
┌───────────┴───────────┐
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ Sina Finance │ │ Local File DB │
│ API (External) │ │ (JSON Format) │
└─────────────────┘ └─────────────────┘
技术栈详情
| 层级 | 技术 | 版本 | 说明 |
|---|---|---|---|
| 框架 | Wails | v2.5.1 | 前端与 Go 后端桥接 |
| 后端语言 | Go | 1.18+ | 高性能系统编程 |
| 前端框架 | Vue.js | 3.2.37 | 渐进式 JS 框架 |
| UI 组件库 | Element Plus | 2.2.28 | 基于 Vue 3 的组件库 |
| 图表引擎 | ECharts | 5.4.1 | Apache 可视化库 |
| 构建工具 | Vite | 3.0.7 | 下一代前端工具链 |
| 缓存 | gcache | v0.0.2 | Go LRU 缓存实现 |
| 日志 | logrus | v1.9.0 | 结构化日志库 |
📦 快速开始
环境要求
- Go 1.18 或更高版本
- Node.js 16+ 和 npm
- Wails CLI (
go install github.com/wailsapp/wails/v2/cmd/wails@latest)
安装步骤
# 1. 克隆项目
git clone <repository-url>
cd stock-gui
# 2. 安装 Go 依赖
go mod download
# 3. 安装前端依赖
cd frontend
npm install
cd ..
# 4. 启动开发模式
wails dev
# 5. 构建生产版本
wails build
构建选项
# 标准构建
wails build
# 使用 UPX 压缩减小二进制体积
wails build -upx
# 清理并重新构建
wails build -clean
# 同时启用 UPX 和清理
wails build -upx -clean
📚 使用说明
界面布局
┌────────────────────────────────────────────────────┐
│ [🔍 股票搜索框] [🔄 刷新按钮] │
│ │
│ │
│ ┌──────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ K 线图区域 │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────┘ │
│ │
│ 缩放：[====●======] 5% ~ 100% │
└────────────────────────────────────────────────────┘
操作流程
- 搜索股票：在搜索框输入股票代码（如
600519）或名称（如贵州茅台） - 选择标的：从下拉列表中点击选择目标股票
- 查看 K 线：图表自动加载并展示历史行情数据
- 交互分析：
- 移动鼠标查看具体日期价格信息
- 拖动滑块调整时间跨度
- 滚动鼠标滚轮快速缩放
- 刷新数据：点击刷新按钮获取最新行情
🔌 API 设计
外部数据源
1. 股票字典接口
GET http://api.jinshuyuan.net/get_stk_dic
响应格式：
[
{"code": "000001", "name": "平安银行"},
{"code": "000002", "name": "万科 A"},
...
]
2. K 线数据接口
GET http://money.finance.sina.com.cn/quotes_service/api/json_v2.php/CN_MarketData.getKLineData
?symbol=${symbol}&scale=${scale}&ma=${ma}
参数说明：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| symbol | string | 是 | 股票代码，如 sh600519 |
| scale | int | 否 | 周期（默认 5 分钟），1=日 K, 5=5 分钟等 |
| ma | string | 否 | 均线配置，如 MA5,MA10,MA30 |
响应格式：
{
"data": {
"close": ["1700.00", "1705.50", ...],
"date": ["2024-01-01", "2024-01-02", ...],
"open": ["1695.00", "1700.00", ...],
"high": ["1710.00", "1715.00", ...],
"low": ["1690.00", "1698.00", ...],
"volume": ["1000000", "1200000", ...],
"averages": {"MA5": [...], "MA10": [...], "MA30": [...]}
}
}
Go 后端方法暴露
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
StockList(query) | 搜索关键词 | []Stock | 返回匹配的股票列表 |
StockData(symbol) | 股票代码 | *KlineData | 返回 K 线及均线数据 |
📁 项目结构
stock-gui/
├── main.go # 应用入口，Wails 初始化
├── app.go # 业务逻辑层（Go）
├── go.mod # Go 模块依赖
├── go.sum # 依赖校验
├── wails.json # Wails 项目配置
├── README.md # 项目文档
├── stock.db # 股票字典缓存（运行时生成）
├── build/ # 构建资源
│ ├── appicon.png # 应用图标
│ └── windows/
│ ├── icon.ico # Windows 图标
│ ├── info.json # 可执行文件元数据
│ └── wails.exe.manifest # Windows 清单文件
└── frontend/ # Vue.js 前端
├── package.json # NPM 依赖
├── vite.config.js # Vite 配置
├── index.html # HTML 入口
└── src/
├── main.js # Vue 应用初始化
├── App.vue # 根组件
├── style.css # 全局样式
└── components/
└── StockShow.vue # K 线图表主组件
👨💻 开发指南
调试模式
# 启动开发服务器（带热重载）
wails dev
访问 http://localhost:34115 可在浏览器中调试前端，同时保留对 Go 方法的完整访问能力。
代码组织建议
Go 后端（app.go）
type App struct {
ctx context.Context
cache gcache.Cache[string, *[]Stock] // LRU 缓存
dbPath string // 数据库文件路径
mu sync.Mutex // 并发锁
}
// 导出给前端调用的方法
func (a *App) StockList(query string) ([]Stock, error)
func (a *App) StockData(symbol string) (*KlineData, error)
Vue 前端（StockShow.vue）
<script setup>
import { reactive, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
const state = reactive({
searchQuery: '',
currentSymbol: null,
chartData: null,
zoomRange: [0, 100]
})
let chartInstance = null
onMounted(() => {
chartInstance = echarts.init(dom, 'svg')
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
chartInstance.dispose()
window.removeEventListener('resize', handleResize)
})
</script>
⚡ 性能优化
已实施的优化措施
| 优化项 | 实现方式 | 效果 |
|---|---|---|
| LRU 缓存 | gcache 1000 条容量 | 减少重复 API 请求 |
| 文件持久化 | JSON 格式本地存储 | 冷启动速度提升 |
| 缓存过期 | 1 小时 TTL | 平衡数据新鲜度与性能 |
| SVG 渲染 | ECharts SVG 模式 | 高分辨率屏幕适配 |
| GOMAXPROCS | 动态设置 CPU 核数 | 充分利用多核性能 |
| UPX 压缩 | 可选构建选项 | 二进制体积减少 50%+ |
潜在优化方向
- 增量数据更新（WebSocket 推送）
- 更多技术指标（MACD、KDJ、BOLL）
- 多股票对比视图
- 自定义均线参数
- 导出图表为图片/PDF
❓ 常见问题
Q: 为什么搜索没有结果？
A: 可能是以下原因：
- 网络连接问题，无法获取股票字典
- 输入的代码或名称不存在于数据库中
- 检查
stock.db文件是否生成成功
Q: K 线图加载失败怎么办？
A:
- 确认股票代码格式正确（如
sh600519或sz000001） - 检查是否能访问新浪财经 API
- 查看控制台日志获取详细错误信息
Q: 如何添加新的技术指标？
A:
- 在
frontend/src/components/StockShow.vue中找到 ECharts 配置 - 在
series数组中添加新的折线系列 - 计算对应的指标数据（可在 Go 后端或 Vue 前端实现）
Q: 打包后的程序图标不显示？
A: 确保 build/windows/info.json 中的图标路径正确，并重新执行 wails build。
📄 许可证
本项目采用 MIT 许可证。详见 LICENSE 文件。
🙏 致谢
Made with ❤️ using Go and Vue.js
