打造赏心悦目的首页数据展示前端页面：全面指南

2023-12-13 10:42:27

打造赏心悦目的首页数据展示前端页面

1. 封装API请求，用户调用后端接口

1.1 创建api文件夹，创建/api/hosp/hosp.js

要从后端获取医院相关数据，我们需要创建一个名为hosp.js的文件，其中包含用于调用医院列表API的函数。

// /api/hosp/hosp.js

import request from '@/utils/request'

export function getHospitalList(params) {
  return request({
    url: '/admin/hosp/hospital/list',
    method: 'get',
    params
  })
}

1.1.1 创建/api/cmn/dict.js用于调取数据字典中的值

对于数据字典中的值，我们创建另一个名为dict.js的文件，其中包含一个函数，用于根据代码获取数据字典列表。

// /api/cmn/dict.js

import request from '@/utils/request'

export function getDictList(dictCode) {
  return request({
    url: '/admin/cmn/dict/list/' + dictCode,
    method: 'get'
  })
}

1.2 添加组件，用于页面显示

现在，我们需要创建一个名为HospitalList.vue的组件，用于在页面上显示医院列表。

// components/HospitalList.vue

<template>
  <div class="hospital-list">
    <el-table :data="hospitalList" stripe>
      <el-table-column prop="hosname" label="医院名称" />
      <el-table-column prop="hoslevelString" label="医院等级" />
      <el-table-column prop="provinceString" label="所在省份" />
      <el-table-column prop="cityString" label="所在城市" />
      <el-table-column prop="districtString" label="所在区县" />
      <el-table-column prop="address" label="详细地址" />
    </el-table>
  </div>
</template>

<script>
import { getHospitalList } from '@/api/hosp/hosp'

export default {
  name: 'HospitalList',
  data() {
    return {
      hospitalList: []
    }
  },
  created() {
    this.getHospitalList()
  },
  methods: {
    async getHospitalList() {
      const res = await getHospitalList()
      this.hospitalList = res.data.list
    }
  }
}
</script>

<style>
.hospital-list {
  width: 100%;
}
</style>

1.3 在index.vue页面中编写js代码，用于实现数据在页面的显示

最后，我们在index.vue页面中编写JavaScript代码，以便HospitalList组件出现在页面上并从后端获取数据。

// index.vue

<template>
  <div class="index">
    <HospitalList />
  </div>
</template>

<script>
import HospitalList from '@/components/HospitalList'

export default {
  name: 'Index',
  components: {
    HospitalList
  }
}
</script>

<style>
.index {
  width: 100%;
  height: 100%;
}
</style>

2. 数据可视化

为了让数据更具吸引力，我们可以使用echarts库创建一个图表来可视化医院等级分布。

// index.vue

<template>
  <div class="index">
    <HospitalList />
    <div id="chart"></div>
  </div>
</template>

<script>
import HospitalList from '@/components/HospitalList'
import * as echarts from 'echarts'

export default {
  name: 'Index',
  components: {
    HospitalList
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {
          text: '医院等级分布图'
        },
        tooltip: {},
        xAxis: {
          data: ['三级甲等', '三级乙等', '三级丙等', '二级甲等', '二级乙等', '二级丙等', '一级甲等', '一级乙等', '一级丙等']
        },
        yAxis: {},
        series: [{
          name: '医院数量',
          type: 'bar',
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90]
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style>
.index {
  width: 100%;
  height: 100%;
}
#chart {
  width: 100%;
  height: 400px;
}
</style>