qxtj

qinxianzhangyao

2024-04-25 74a7a2bbef241a023110ff24c8e7c84025e267f5

 src/views/index.vue

@@ -72,10 +72,18 @@

  created() {
    this.getList();

  },
  watch: {
        $route(to, from) {
            window.location.reload(); //监测到路由发生跳转时刷新一次页面
            // this.$router.go(0);
        },
    },
 

  methods: {

 
    getList() {
      this.loading = true;
      // 查询今日登记
@@ -179,119 +187,128 @@

      // 饼状图
      getPieChart().then((response) => {
        this.PieChart = response.data.tjdj
        this.PieChart.forEach(item => {
          item.value = item.count
        })
        this.PieChart.reverse()
        this.PieChart.push(this.PieChart[0])
        this.PieChart.splice(0, 1)
        this.PieChart2 = response.data.tjyc
        if (this.PieChart2 == 0) {
          this.PieChart2 = [
          
           
           
            {
              "name": "40-60岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "16-40岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "3-16岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "0-3岁",
              "count": 1,
              "value": 1
            },
            {
              "name": "60岁以上",
              "count": 1,
              "value": 1
            }
          ]
        }
        this.PieChart2.reverse()
        this.PieChart2.push(this.PieChart2[0])
        this.PieChart2.splice(0, 1)
        this.PieChart2.forEach(item => {
          item.value = item.count
        })
        // this.TobeToday = response
        let myChart2 = this.$echarts.init(document.getElementById('main2'));
        let myChart3 = this.$echarts.init(document.getElementById('main3'));
        myChart2.setOption({
          title: {
            text: '体检登记人数分布',
            top: '5'
        if (response.data) {

          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '78%',
            left: 'center'
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: ['16%', '54%'],
              center: ["50%", "43%"],
              data: this.PieChart,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
        })
        myChart3.setOption({
          title: {
            text: '体检结果异常人数分布',
            top: '5'
          if (response.data.tjdj.length === 0) {
            this.PieChart = []
            this.PieChart = [
              {
                "name": "体检登记人数分布",
                "count": 1,
                "value": 10
              },

          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '78%',
            left: 'center'
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: ['16%', '54%'],
              center: ["50%", "43%"],
              data: this.PieChart2,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
            ]
          } else {
            this.PieChart = response.data.tjdj
            this.PieChart.forEach(item => {
              item.value = item.count
            })
            this.PieChart.reverse()
            this.PieChart.push(this.PieChart[0])
            this.PieChart.splice(0, 1)

          }

          let myChart2 = this.$echarts.init(document.getElementById('main2'));
          myChart2.setOption({
            title: {
              text: '体检登记人数分布',
              top: '5'

            },

            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '80%',
              left: 'center'
            },
            series: [
              {
                // name: 'Access From',
                type: 'pie',
                radius: ['16%', '54%'],
                center: ["50%", "43%"],
                avoidLabelOveralap:false,
                startAngle:180,
                minAngle:10,
                data: this.PieChart,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            }]
        })
        window.onresize = function () {
          myChart2.resize()
          myChart3.resize()
              }]
          })

          if (response.data.tjyc.length === 0) {
            this.PieChart2 = []
            this.PieChart2 = [
              {
                "name": "体检结果异常人数分布",
                "count": 1,
                "value": 10
              },

            ]
          } else {
            this.PieChart2 = response.data.tjyc
            this.PieChart2.reverse()
            this.PieChart2.push(this.PieChart2[0])
            this.PieChart2.splice(0, 1)
            this.PieChart2.forEach(item => {
              item.value = item.count
            })
            // this.TobeToday = response
          }
          let myChart3 = this.$echarts.init(document.getElementById('main3'));

          myChart3.setOption({
            title: {
              text: '体检结果异常人数分布',
              top: '5'

            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '80%',
              left: 'center'
            },
            series: [
              {
                // name: 'Access From',
                type: 'pie',
                radius: ['16%', '54%'],
                center: ["50%", "43%"],
                avoidLabelOveralap:false,
                startAngle:180,
                minAngle:10,
                data: this.PieChart2,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
          })
        }


        // window.onresize = function () {
        //   myChart2.resize()
        //   myChart3.resize()
        // }
        this.loading = false;
      });

    }
  },

@@ -329,7 +346,7 @@
}

.img {
 width: 60%;
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
@@ -354,7 +371,8 @@
}

.data-view {
  margin: 5px 15px;
  margin: 0 15px;
  height: 323px !important
}

#main {
@@ -363,6 +381,7 @@

.view {
  margin: 0px 15px;
  padding-top: 15px;
  height: 350px;
  display: flex;
}