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

文章结尾部分有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>