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 代码实例

python 复制代码

<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>