项目实训工作记录5

本次记录主要针对可视化页面的开发，需求是生成一个词云和一个饼图，词云显示该医生的病人出现频率最高的病情，饼图显示该医生的病人的年龄分布。这次先实现饼图的生成

引入可视化组件

1.npm i echarts vue-echarts
解释：安装echarts库和用于支持在vue中使用echats的vue-echarts库
2.在main,js引入组件并注册到vue中

import ECharts from 'vue-echarts'
import 'echarts'
import 'echarts-wordcloud';


const app=createApp(App).component('ECharts', ECharts)

编写Visual.vue文件

1. 编写布局

<template>
  <div style="text-align: center; font-size: 20px">
    <el-button @click="router.push('/diagnostic')"> 返回</el-button>
    病历系统数据可视化
  </div>
  <hr>
  <e-charts class="chart" :option="option" />
</template>

2. 在JS部分向option传入参数

<script setup>
import { ref, provide } from "vue";
import axios from "axios";
import router from "@/router";
import store from "@/store";

const ageList = ref([

])

const option = ref({

})
const initialAgeList = async() => {
  await axios.get('http://localhost:8000/medic/return_age_times/' +  store.state.userid).then(res => {
        // console.log(res.data)
        ageList.value = res.data.ageList;

        let resultList = {}
        console.log(ageList.value)
        ageList.value.forEach(element =>{
          if (element.name != "未提供岁") {
            let temp = parseInt(element.name.charAt(0))
            let range = (temp * 10 + 1) + "-" + (temp * 10 + 10) + '岁'
            resultList[range] = (resultList[range] || 0) + element.value;
          }
        })
        let final = []
        Object.entries(resultList).forEach((element) =>{
          final.push( {name:element[0], value: element[1]} )
        })
        console.log(final)

        option.value = {
          title: {
            text: "年龄分布",
            left: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: final.map(d => d.name)
          },
          series: [
            {
              name: "年龄分布",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: final,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]

        }
      }
  )
}
initialAgeList()

</script>