-
核心优势:
-
"医脉"直击主题,"云枢"体现技术前瞻性
-
"非遗传承"呼应二十大文化政策
-
"多维"涵盖3D模型、时间轴、地图等多种可视化形式
-
技术栈:Vue + Flask + Element UI + ECharts + MySQL
同时参考了B站的视频以及往届的一些进入国赛的作品(《百花齐放——中医药发展历程信息可视化》;《中药材信息可视化》;《茶香古韵—西湖龙井图形信息可视化设计与 应用》;《广府灰塑文化的信息可视化设计》等等),再看了一下这届比赛的主题,我们可以尝试以下的idea。
可视化面板功能区详细设计(基于Element UI布局)
左侧导航栏架构
采用 三级导航体系,兼顾功能层级与用户体验,具体结构如下:
一级导航(主功能模块)
图标 | 名称 | 功能定位 | 技术实现复杂度 |
---|---|---|---|
📊 | 知识图谱中枢 | 核心可视化展示与交互 | ★★★☆☆ |
🌐 | 时空演化 | 时间轴+地理分布展示中医药发展 | ★★☆☆☆ |
📚 | 典籍多维分析 | 单味药材/药方的深度数据挖掘 | ★★★☆☆ |
🏆 | 非遗与政策 | 政策关键词+乡村振兴案例 | ★★☆☆☆ |
✍️ | 用户共创 | 大众补充知识+问答社区 | ★★★☆☆ |
⚙️ | 系统管理(管理员) | 数据审核+用户权限 | ★★★★☆ |
二级导航(核心模块展开)(以下是Al的一些扩展)
1. 知识图谱中枢
子模块 | 功能描述 | 组件方案 | 数据接口示例 |
---|---|---|---|
全局关系网络 | 力导向图展示药材-药方-病症关系,支持缩放/拖拽 | AntV G6 力导向图 + ECharts 关系图 | /api/kg/global?type=herb |
智能语义搜索 | 自然语言查询(如“治疗咳嗽的寒性药材”) | Element UI 输入框 + 后端NLP处理(Jieba 分词 + 图查询) | /api/search?q=咳嗽+寒性 |
3D药材模型库 | WebGL展示中药材三维结构 | Three.js 模型加载 + Element UI 缩略图列表 | /api/models/gancao.glb |
2. 典籍多维分析
子模块 | 功能描述 | 组件方案 | 数据联动示例 |
---|---|---|---|
属性雷达图 | 性味归经五维分析(甘/苦/寒/热/毒) | ECharts 雷达图 + Element UI 滑块控制维度 | @radar-change="updateChart" |
古今成分对比 | 双Y轴柱状图对比古代药方与现代中成药成分 | ECharts 双Y轴 + Element UI 选项卡切换对比项 | /api/prescription/compare?id=1 |
典籍原文溯源 | 高亮显示古籍出处(如《本草纲目》原文节选) | PDF.js 嵌入古籍扫描件 + 文本高亮注解 | /api/text/origin?herb=甘草 |
3. 非遗与政策
子模块 | 功能描述 | 组件方案 | 政策结合点 |
---|---|---|---|
政策词云 | 二十大/中央一号文件关键词动态云图 | ECharts 词云图 + 定时刷新动画 | 突出“传承”“创新”“乡村振兴” |
非遗地图 | 结合高德API标注国家级中医药非遗项目分布 | ECharts 地图叠加散点图 + Element UI 筛选器 | 数据来源:中国非遗网官方API |
振兴案例库 | 图文展示中医药助力乡村产业案例(如亳州药材种植) | Element UI 卡片流布局 + 视频嵌入 | 呼应中央一号文件 |
三级导航(特色交互)
悬浮工具栏(画布右侧)
工具 | 功能 | 技术实现 |
---|---|---|
关系筛选器 | 按关系类型(组成/治疗/禁忌)过滤图谱边 | Element UI 多选框 + 图数据动态过滤 |
布局切换 | 切换力导向/环形/树状布局 | AntV G6 布局控制器 + 过渡动画 |
数据统计面板 | 实时显示节点数/边数/数据更新时间 | Vue计算属性 + Websocket推送更新 |
实现可行性评估
模块 | 技术难点 | 解决方案 | 预估工时 |
---|---|---|---|
知识图谱渲染 | 大规模节点性能优化 | Web Worker异步加载 + 节点聚合策略(超过500节点时启用) | 25h |
3D模型交互 | 跨设备兼容性 | 使用Three.js + 提供多精度模型(高清版/移动版) | 18h |
政策词云实时性 | 高频词动态更新 | WebSocket长连接 + 词频统计服务(Python jieba +collections.Counter ) | 10h |
古今成分对比 | 数据标准化处理 | 构建药材成分映射表(如将“麻黄碱”映射到古代“发汗成分”) | 15h |
脱颖而出的设计细节
-
沉浸式叙事
-
进入系统时播放3~5秒的 中医药发展时间轴开场动画,使用
GSAP
库实现滚动驱动动画
-
-
多端适配
-
使用
Element UI
的响应式布局 +rem
单位,确保Pad端画布工具栏自动折叠为下拉菜单
-
-
学术可信度
-
在每个数据点添加 文献来源角标(如《本草纲目·卷三》),鼠标悬停显示完整引用格式
-
通过以上设计,项目将具备清晰的模块划分、深度的政策关联和前沿的技术呈现,完全贴合竞赛评审标准。开发顺序:知识图谱中枢 → 典籍多维分析 → 非遗与政策模块。