studenthotel_data/src/components/leftButtom.vue

<template>
  <div class="cointan">
    <div class="title1">
      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
      <div style="margin-left:25px;line-height: 22px;">近30日出归人员统计</div>
    </div>
    <!-- 柱状图 -->
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
export default {
  name: 'leftButtom',
  data() {
    return {
      tongTime:[],//统计的横坐标时间
      tongNum:[],//出归人数
      build:'',//楼栋
      token:'',//请求头token
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getchugui()
    this.t3 = setInterval(function() {
      this.getchugui()
    }, 43200000);
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.t3)
  },
  methods:{
    //近30天出归人员统计
    getchugui(){
      this.tongTime=[]
      this.tongNum=[]
      this.$axios.get('/auto/face-recognition/statistics?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1],
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          var shuzu=(res.data.data).reverse()
          // 横坐标时间
          shuzu.forEach(data => {
            this.tongTime.push(data.date.slice(5,10))
          })
          //纵坐标出归人数
          shuzu.forEach(data => {
            this.tongNum.push(data.count)
          })
          this.getEchartData()
        }
      })
    },
    // 30日出归人员
    getEchartData() {
      let _this = this;
      const chart = this.$refs.chart;
      var option = null;
      const myChart = this.$echarts.init(chart);
      option = {
        color: ['#00DAD8', '#00FF96'],
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#0FEBFF'
            }
          }
        },
        grid: {
          left: '1%',
          right: '8%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            name:'日',
            nameTextStyle: {
              color: "#FFFFFF",
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#FFFFFF",//人数的颜色
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2E3F44", 
              },
            },
            type: 'category',
            data: this.tongTime
          }
        ],
        yAxis: [
          {
            name:'人',
            nameTextStyle: {
              color: "#FFFFFF",
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#FFFFFF",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
              type: [5, 10],
              dashOffset: 5,
              color:'#606060'
            }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '人员统计',
            type: 'bar',
            barWidth: "3",
            data: this.tongNum
          },
        ]
      };
      myChart.setOption(option);

      myChart.off("click");

      myChart.on("click", function (params) {
        // console.log(params);
        _this.$emit("openPop");
      });

      window.addEventListener("resize", function () {
        myChart.resize();
      });
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          chart.resize();
        });
      });
      return option;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 428px;
  height: 349px;
  background-image: url('../assets/leftBottom/background.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 柱状图
.chart{
  position: absolute;
  margin: 50px 0 0 20px;
  width: 390px;
  height: 278px;
}
</style>