当前位置：首页 > news >正文

F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql

news 2025/10/26 7:49:52

文章结尾部分有CSDN官方提供的学长联系方式名片

关注B站，有好处！
编号: F036

视频

vue+python 中药可视化系统前后端分离带数据库echarts可视化、Flask

1 系统简介

系统简介：本系统是一个基于Vue+Flask+ECharts+MySQL构建的中医热性药知识图谱可视化系统，旨在为用户提供中医药材和方剂的知识查询与可视化分析服务。系统的核心功能包括：首页，展示系统概览及热性药材的知识点图谱；药材搜索与介绍模块，支持用户查询中医热性药材的详细信息；方剂搜索与构成查看模块，提供热性方剂的组成成分及其药理作用；功效关键词提取与分析模块，通过自然语言处理技术提取关键词并生成可视化分析图表；以及用户管理模块，包含登录、注册、修改个人信息、头像及密码等功能，确保用户体验的安全性和个性化需求。

2 功能设计

系统采用B/S（浏览器/服务器）架构模式，前端基于Vue.js框架，结合Vuex进行状态管理，Vue Router实现路由导航，ECharts负责数据可视化图表的渲染。前端通过RESTful API与Flask后端交互，后端负责业务逻辑处理，同时利用MySQL数据库进行数据存储，包括中医热性药材、方剂、功效关键词等相关信息的持久化管理。此外，系统还集成了数据爬虫模块，用于抓取并处理中医药相关数据，清洗后导入数据库，为系统提供数据支持。

2.1系统架构图

在这里插入图片描述

2.2 功能模块图

在这里插入图片描述

3 功能展示

3.1 登录 & 注册

登录注册做的是一个可以切换的登录注册界面，点击去登录后者去注册可以切换，背景是一个视频，循环播放。
登录需要验证用户名和密码是否正确，如果不正确会有错误提示。
在这里插入图片描述
注册需要验证用户名是否存在，如果错误会有提示。

3.2 主页

主页的布局采用了左侧是菜单，右侧是操作面板的布局方法，右侧的上方还有用户的头像和退出按钮，如果是新注册用户，没有头像，这边则不显示，需要在个人设置中上传了头像之后就会显示。

3.3 药材搜索 & 药材详情

药材搜索：
在这里插入图片描述
药材详情

3.4 方剂搜索 & 构成查看

方剂搜索：
在这里插入图片描述

方剂的构成，组成成分：

3.5 数据大屏可视化

数据大屏可视化包含了
药材的类型和药味的分析：
在这里插入图片描述
类型和药味的排名：

3.6 关键词分析 & 关键词提取

关键词提取：
在这里插入图片描述
关键词分析：

3.7 个人设置

个人设置方面包含了用户信息修改、密码修改功能。
用户信息修改中可以上传头像，完成用户的头像个性化设置，也可以修改用户其他信息。
在这里插入图片描述
修改密码需要输入用户旧密码和新密码，验证旧密码成功后，就可以完成密码修改。

4程序代码

4.1 代码说明

代码介绍：该功能旨在构建一个中医热性药物的可视化界面，基于Vue框架和ECharts图表库。界面将展示中医药物的热性分布，用户可以通过地图、柱状图等方式查看药物的热性分布情况。界面支持药物信息的筛选、查看详情以及交互式的数据探索。

4.2 流程图

在这里插入图片描述

4.3 代码实例

<template><div class="app-container"><div class="filter-container"><el-select v-model="selectValue" placeholder="请选择"><el-option label="全部" value="all"></el-option><el-option label="高热" value="high"></el-option><el-option label="中热" value="medium"></el-option><el-option label="微热" value="low"></el-option></el-select></div><div id="chart" style="width: 100%; height: 600px;"></div><div class="table-container"><el-table :data="medicineList" stripe><el-table-column prop="name" label="药物名称"></el-table-column><el-table-column prop="properties" label="性味"></el-table-column><el-table-column prop="effects" label="功效"></el-table-column></el-table></div></div>
</template><script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'export default {data() {return {chart: null,selectValue: 'all',medicineList: [{name: '药物A',properties: '辛、温',effects: '温中散寒'},// ... more data]}},mounted() {this.initChart()},methods: {initChart() {this.chart = echarts.init(document.getElementById('chart'))const option = {title: {text: '中医药热性分布图'},toolbox: {feature: {saveAsImage: {}}},series: [{type: 'map',mapType: 'china',data: []}]}this.chart.setOption(option)}}
}
</script><style>
.app-container {padding: 20px;
}.filter-container {margin-bottom: 20px;
}.table-container {margin-top: 20px;
}
</style>