项目实训工作记录6

编写词云部分

准备DOM元素

<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" />
  <e-charts class="cloud" :option="optionTwo"></e-charts>
</template>

编写JS代码

在JS部分向optionTwo传入参数

<script setup>
import { ref, provide } from "vue";
import axios from "axios";
import router from "@/router";
import store from "@/store";
const cloudList = ref([

])
const optionTwo = ref({

})





var keywords = [

]

// let wordsCounts = []
const getCloudList = (list) => {
  let wordCounts = {}
  list.forEach(comment => {
    // 使用正则表达式匹配中文字符
    let words = comment.match(/[\u4e00-\u9fa5]+/g);
    if (words) {
      words.forEach(word => {
        wordCounts[word] = (wordCounts[word] || 0) + 1;
      });
    }
  });

  Object.entries(wordCounts).forEach((element) =>{
    keywords.push({ name:element[0], value: element[1]} )
  })
  //console.log(keywords)
}




const initialCloudList = async() => {
  await axios.get('http://localhost:8000/medic/return_word_cloud/' + store.state.userid).then(res => {
    //console.log(res.data.chiefList)
    cloudList.value = res.data.chiefList;
    getCloudList(cloudList.value);

    optionTwo.value = {
      series: [{
        type: 'wordCloud',
        //maskImage: maskImage,
        sizeRange: [15, 80],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 8,
        shape: 'pentagon',
        width: '100%',
        height: '100%',
        textStyle: {
          normal: {
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            },
            fontFamily: 'sans-serif',
            fontWeight: 'normal'
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: keywords
      }]
    }

  })
}
initialCloudList()


</script>

其中的重点在于，后端给前端传来的是各个病情描述构成的数组，我们需要对其进行遍历，同时一边遍历一边统计词频，最后将统计的词频转换为echarts的词云所需要的格式，传给optionTwo变量。

let wordsCounts = []
const getCloudList = (list) => {
  let wordCounts = {}
  list.forEach(comment => {
    // 使用正则表达式匹配中文字符
    let words = comment.match(/[\u4e00-\u9fa5]+/g);
    if (words) {
      words.forEach(word => {
        wordCounts[word] = (wordCounts[word] || 0) + 1;
      });
    }
  });

  Object.entries(wordCounts).forEach((element) =>{
    keywords.push({ name:element[0], value: element[1]} )
  })
  //console.log(keywords)
}

最后附上完整的Visual.vue界面代码

<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" />
  <e-charts class="cloud" :option="optionTwo"></e-charts>
</template>

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

const ageList = ref([

])
const cloudList = ref([

])
const option = ref({

})
const optionTwo = 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()




var keywords = [

]

// let wordsCounts = []
const getCloudList = (list) => {
  let wordCounts = {}
  list.forEach(comment => {
    // 使用正则表达式匹配中文字符
    let words = comment.match(/[\u4e00-\u9fa5]+/g);
    if (words) {
      words.forEach(word => {
        wordCounts[word] = (wordCounts[word] || 0) + 1;
      });
    }
  });

  Object.entries(wordCounts).forEach((element) =>{
    keywords.push({ name:element[0], value: element[1]} )
  })
  //console.log(keywords)
}




const initialCloudList = async() => {
  await axios.get('http://localhost:8000/medic/return_word_cloud/' + store.state.userid).then(res => {
    //console.log(res.data.chiefList)
    cloudList.value = res.data.chiefList;
    getCloudList(cloudList.value);

    optionTwo.value = {
      series: [{
        type: 'wordCloud',
        //maskImage: maskImage,
        sizeRange: [15, 80],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 8,
        shape: 'pentagon',
        width: '100%',
        height: '100%',
        textStyle: {
          normal: {
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            },
            fontFamily: 'sans-serif',
            fontWeight: 'normal'
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: keywords
      }]
    }

  })
}
initialCloudList()


</script>

<style scoped>
.chart {
  height: 350px;
  width: 100%;
}
.cloud {
  height: 300px;
  width: 100%;
}
</style>