szxc/ruoyi-ui/src/views/szxc/sjdp/index.vue

<template>
  <div class="container">
    <div class="head">
      <div class="center">数据大屏</div>
    </div>
    <div class="content">
      <div class="analysis" id="analysis1"></div>
      <div class="analysis" id="analysis2"></div>
      <div class="analysis" id="analysis3"></div>
      <div class="analysis" id="analysis4"></div>
      <div class="analysis" id="analysis5"></div>
    </div>

  </div>
</template>

<script>
import { bigDataTag, bigDataAge, bigDataSex, bigDataActive, bigDataWish } from "@/api/szxc/sjdp";
import * as echarts from 'echarts';

let barChart1 = null;
let barChart2 = null;
let barChart3 = null;
let barChart4 = null;
let barChart5 = null;

function resizeFun() {
  barChart1.resize();
  barChart2.resize();
  barChart3.resize();
  barChart4.resize();
  barChart5.resize();
}

export default {
  name: "Index",
  data() {
    return {
      age: {
        legend: [],
        xAxis: [],
        series: []
      },
      sex: {
        xAxis: [],
        series: []
      },
      tag: {
        legend: [],
        xAxis: [],
        series: []
      },
      active: {
        legend: [],
        xAxis: [],
        series: []
      },
      wish: {
        legend: [],
        xAxis: [],
        series: []
      }
    };
  },
  created() {
    this.getBigDataAge()
    this.getBigDataSex()
    this.getBigDataTag()
    this.getBigDataActive()
    this.getBigDataWish()
  },
  beforeDestroy() {
    if (!barChart1) {
      return
    }
    barChart1.dispose()
    barChart2.dispose()
    barChart3.dispose()
    barChart4.dispose()
    barChart5.dispose()

    barChart1 = null
    barChart2 = null
    barChart3 = null
    barChart4 = null
    barChart5 = null

    window.removeEventListener("resize", resizeFun);
  },
  methods: {
    // 年龄
    getBigDataAge() {
      bigDataAge().then(response => {
        this.age.legend = []
        this.age.xAxis = ['0-12岁','13-17岁','18-22岁','23-30岁','31-59岁','60岁以上']
        this.age.series = []

        response.forEach(item => {
          this.age.legend.push(item.dept_name);
          let arr = [];

          this.age.xAxis.forEach(item1=>{
            arr.push(item[item1])
          })

          this.age.series.push(
            {
              name: item.dept_name,
              type:'line',
              data: arr
            }
          )
        })
        this.initChart();
      });
    },
    // 性别
    getBigDataSex() {
      bigDataSex().then(response => {
        this.sex.xAxis = []
        this.sex.series = []

        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        response.forEach(item => {
          this.sex.xAxis.push(item.dept_name);
          arr1.push(item.headCount)
          arr2.push(item.man)
          arr3.push(item.women)
        })

        this.sex.series = [{
          name: '总数',
          type: 'bar',
          data: arr1
        },
          {
            name: '男',
            type: 'bar',
            data: arr2
          },
          {
            name: '女',
            type: 'bar',
            data: arr3
          }]

        this.initChart()
      });
    },
    // 标签
    getBigDataTag() {
      bigDataTag().then(response => {
        this.tag.legend = []
        this.tag.xAxis = []
        this.tag.series = []

        if(response && response[0]){
          this.tag.xAxis = Object.keys(response[0]).filter(item1 => item1 !== "dept_name")
        }

        response.forEach(item => {
          this.tag.legend.push(item.dept_name);
          let arr = [];

          this.tag.xAxis.forEach(item1=>{
            arr.push(item[item1])
          })

          this.tag.series.push(
            {
              name: item.dept_name,
              type:'bar',
              data: arr
            }
          )
        })
        this.initChart()
      });
    },
    // 活动
    getBigDataActive() {
      bigDataActive().then(response => {
        this.active.xAxis = []
        this.active.series = []

        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let arr4 = [];
        response.forEach(item => {
          this.active.xAxis.push(item.dept_name);
          arr1.push(item.num)
          arr2.push(item['待开始'])
          arr3.push(item['进行中'])
          arr3.push(item['已结束'])
        })

        this.active.series = [{
          name: '总数',
          type: 'bar',
          data: arr1
        },
          {
            name: '待开始',
            type: 'bar',
            data: arr2
          },
          {
            name: '进行中',
            type: 'bar',
            data: arr3
          },
          {
            name: '已结束',
            type: 'bar',
            data: arr4
          }
        ]

        this.initChart()
      });
    },
    // 心愿
    getBigDataWish() {
      bigDataWish().then(response => {
        this.wish.legend = []
        this.wish.xAxis = []
        this.wish.series = []

        if(response && response[0]){
          this.wish.xAxis = Object.keys(response[0]).filter(item1 => item1 !== "dept_name")
        }

        response.forEach(item => {
          this.wish.legend.push(item.dept_name);
          let arr = [];

          this.wish.xAxis.forEach(item1=>{
            arr.push(item[item1])
          })

          this.wish.series.push(
            {
              name: item.dept_name,
              type:'bar',
              data: arr
            }
          )
        })
        this.initChart()
      });
    },
    initChart() {
      const _this = this;

      barChart1 = echarts.init(document.getElementById('analysis1'));
      barChart1.setOption({
        title: {
          text: '年龄分布'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: _this.age.legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.age.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: _this.age.series
      });

      barChart2 = echarts.init(document.getElementById('analysis2'));
      barChart2.setOption({
        title: {
          text: '性别分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data:["总数","男","女"]
        },
        xAxis: {
          data: this.sex.xAxis
        },
        yAxis: {},
        series: this.sex.series
      });

      barChart3 = echarts.init(document.getElementById('analysis3'));
      barChart3.setOption({
        title: {
          text: '标签分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: _this.tag.legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.tag.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: _this.tag.series
      });

      barChart4 = echarts.init(document.getElementById('analysis4'));
      barChart4.setOption({
        title: {
          text: '活动分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总数', '待开始', '进行中', '已结束']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: _this.active.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: _this.active.series
      });

      barChart5 = echarts.init(document.getElementById('analysis5'));
      barChart5.setOption({
        title: {
          text: '心愿分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: _this.wish.legend
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: _this.wish.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: _this.wish.series
      });

      window.addEventListener("resize", resizeFun)
    },
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: url("../../../assets/images/img.png") no-repeat 100% 100%;

  .head {
    margin: 0 auto;
    width: 50%;
    min-width: 600px;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .center {
      background: url("../../../assets/images/head.gif") no-repeat center 43% ;
      background-size: 100%;
      height: 10vh;
      line-height: 7vh;
      flex: 1;
      font-size: 5vh;
      color: #5cf8ff;
      font-family: cursive;
      font-weight: bolder;
      text-shadow: 2px 2px 3px #ffdd45;
      text-align: center;
    }
  }

  .content {
    width: 100vw;
    height: 90vh;
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .analysis{
      width: 600px;
      min-width: 400px;
      height: 400px;
      border-radius: 10px;
      box-sizing: border-box;
      background: rgba(255,255,255,0.8);
      padding: 15px;
      margin-bottom: 20px;
    }
  }
}
</style>