[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80321":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":15,"starSnapshotCount":15,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},80321,"a-share-heatmap","wenyuanw\u002Fa-share-heatmap","wenyuanw","免费开源的 A股热力图｜A股大盘云图，各板块涨跌一眼可见","https:\u002F\u002Fmap.wenyuanw.me",null,"TypeScript",98,12,66,0,1,10,28,7,3.34,"MIT License",false,"main",true,[26,27,28],"financial-analysis","heatmap","stock-market","2026-06-12 02:04:00","\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fpublic\u002Fog-image.png\" alt=\"A 股市场热力图\" width=\"640\" \u002F>\n\u003C\u002Fp>\n\n# A 股市场热力图\n\n一个开源的 **A 股大盘云图** 项目，把整个 A 股市场浓缩成一张可交互的 **A 股市场热力图**。色块大小代表个股流通市值权重，颜色深浅代表当日涨跌幅，让你在几秒钟内看清沪深两市的涨跌结构、行业板块轮动和资金流向。\n\n支持沪深 A 股全图、沪深 300、中证 A500、创业板、科创板等多个市场范围切换，也可以按一级行业板块单独查看热力图；涨跌区间支持当日、近 5 日、近 20 日、今年以来等多个周期，适合作为个人盘前盘后复盘工具，或嵌入财经站点、量化研究平台的市场概览模块。\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fmap.wenyuanw.me\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F在线预览-map.wenyuanw.me-1f6feb?style=for-the-badge&logo=vercel&logoColor=white\" alt=\"在线预览\" \u002F>\n  \u003C\u002Fa>\n   \n  \u003Ca href=\"https:\u002F\u002Fvercel.com\u002Fnew\u002Fclone?repository-url=https:\u002F\u002Fgithub.com\u002Fwenyuanw\u002Fa-share-heatmap\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F一键部署-Deploy%20with%20Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white\" alt=\"一键部署到 Vercel\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fpublic\u002Fpreview.png\" alt=\"A 股市场热力图预览\" width=\"820\" \u002F>\n\u003C\u002Fp>\n\n## 功能亮点\n\n- **全市场云图**：按行业和流通市值权重绘制 A 股矩形树图，越大的色块代表越高的市场权重。\n- **涨跌一眼可见**：红绿配色映射个股涨跌幅，底部图例帮助快速判断行情强弱。\n- **多市场范围**：支持 A 股全图、上证 A 股、深证 A 股、沪深 300、中证 A500、创业板、科创板。\n- **一级板块筛选**：可在任意市场范围内切换到单个一级行业板块，聚焦查看该板块内部个股热力图。\n- **多周期表现**：支持当日、近 5 日、近 20 日、今年以来等涨跌区间切换。\n- **交互式看盘**：支持滚轮缩放、拖拽平移、悬浮查看个股详情、双击个股跳转雪球，双击一级板块标题可聚焦或清除板块筛选。\n- **市场概览面板**：展示上涨、平盘、下跌家数，以及成交额和相对昨日的量能变化；切换一级板块后会同步重算当前板块统计。\n- **截图分享**：一键生成热力图快照，支持下载、复制图片和系统分享。\n- **部署友好**：基于 Next.js API Routes 获取行情快照，短缓存适合 Vercel Serverless 环境。\n\n## 适合场景\n\n- 想拥有一个属于自己的 A 股大盘云图站点，盘中随时打开看一眼当下的市场情绪\n- 在个人投资仪表盘里增加一块 A 股市场热力图，把当日涨跌结构和板块轮动一屏呈现\n- 财经媒体、券商研究或量化平台需要嵌入轻量的 A 股板块热力图，并支持从全市场快速下钻到一级行业板块\n- 学习如何用 Canvas 绘制几千只股票规模的矩形树图，并处理缩放、拖拽等交互细节\n\n## 快速开始\n\n```bash\npnpm install\npnpm dev\n```\n\n打开 [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) 查看页面。\n\n## 一键部署\n\n点击上方 Vercel 按钮后，会直接基于 [wenyuanw\u002Fa-share-heatmap](https:\u002F\u002Fgithub.com\u002Fwenyuanw\u002Fa-share-heatmap) 创建并部署项目。\n\n也可以在 Vercel 控制台导入仓库。项目无需配置环境变量。\n\n## 常用命令\n\n```bash\npnpm dev        # 本地开发\npnpm build      # 生产构建\npnpm start      # 启动生产服务\npnpm lint       # ESLint 检查\npnpm typecheck  # TypeScript 类型检查\n```\n\n## 数据说明\n\n项目会优先请求公开行情快照，并在服务端做秒级缓存，减少页面刷新时的接口压力。当远端数据不可用时，会自动使用 `src\u002Flib\u002Fdata` 中的内置样本快照，确保页面仍可正常打开。\n\n## 技术栈\n\n- Next.js App Router\n- React\n- Canvas 2D\n- Tailwind CSS\n- Vercel Serverless Functions\n\n## 参考与致谢\n\n在设计交互、配色和信息密度时，参考了下面这些优秀的市场热力图产品：\n\n- [Finviz Map](https:\u002F\u002Ffinviz.com\u002Fmap) — 美股市场热力图的经典之作，矩形树图布局的标杆。\n- [TradingView Stock Heatmap](https:\u002F\u002Ftw.tradingview.com\u002Fheatmap\u002Fstock) — 多市场可切换的股票热力图，交互体验流畅。\n- [52ETF 市场云图](https:\u002F\u002F52etf.site\u002F) — 中文圈做得很用心的 A 股大盘云图站点。\n\n## License\n\nMIT\n","这是一个开源的A股市场热力图项目，通过可视化的方式展示沪深两市各板块及个股的涨跌情况。核心功能包括按行业和流通市值权重绘制的全市场云图、支持多市场范围（如沪深300、创业板等）和周期（当日、近5日等）切换、以及丰富的交互特性如缩放、拖拽查看个股详情等。技术上采用TypeScript开发，基于Next.js框架，并利用Canvas 2D渲染图形。适合个人投资者快速了解市场动态、财经媒体或量化研究平台嵌入作为市场概览工具使用。",2,"2026-06-11 04:00:18","CREATED_QUERY"]