ssti-CollegeManage/src/views/echarts/echarts.vue

<template>
    <!-- 创业公司登记 -->
    <div class="firm" v-loading="loading">
      <div class="pAHeader">
        <div class="pAHeader1">数据监测</div>
      </div>
      <hr />
      <!-- 顶部展示信息区开始 -->
      <topData v-if="!loading" :data="HeaderData"/>
      <!-- 顶部展示信息区结束 -->
      <!-- 中部大饼区开始 -->
     <div class="midBlock">
      <!-- 圆形图开始 -->
      <CircularChart v-if="!loading" :data="CircularData"/>
      <!-- 圆形图结束 -->
      <!-- 横向柱状图开始 -->
      <HorizontalChart v-if="!loading" :data="HorizontalData"/>
      <!-- 横向柱状图结束 -->
     </div>
      <!-- 中部大饼区结束 -->

      <!-- 柱状图区域开始 -->
      <ColumnarChart v-if="!loading" :data="ColumnarData"/>
      <!-- 柱状图区域结束 -->

      <!-- 底部表格区域开始 -->
      <RankingTable v-if="!loading" :tableData="tableData"/>
<!-- 通知表格结束-->
      <!-- 底部表格区域结束 -->


    </div>
  </template>
    
  <script>
 //顶部数据
 import topData from './components/topData.vue'
 //圆形图
 import CircularChart from './components/CircularChart.vue';
 //横向柱状图
 import HorizontalChart from './components/HorizontalChart.vue';
 //竖向柱状图
 import ColumnarChart from './components/ColumnarChart.vue';
 //排名表格
 import RankingTable from './components/RankingTable.vue';
  export default {
   components:{topData,CircularChart,HorizontalChart,ColumnarChart,RankingTable},
    data() {
      return {
        loading:false,
        //头部区域数据
        HeaderData:{
          people:0,
          project:0,
          activity:0,
          // budget:0,
          isPay:0
        },
        //圆形
        CircularData:[
          {value:0,name:"个人创客"},
          {value:0,name:"创客活动"}
        ],
        //横行的柱状
        HorizontalData:[
            // [ '物联网激光切割器',0],
            // [ '人工智能领跑马拉松',1000, ],
            // [ '3D演奏智能工具', 2000],
            // [ '人工智能分链机器',3000],
        ],
        // 柱状
        ColumnarData:[
              // ['3D智能分链机器', 2000],
              // ['3D智能分链机器1',3000],
              // ['3D智能分链机器2', 2500],
              // ['3D智能分链机器3', 1000],
              // ['3D智能分链机器4', 2000],
              // ['3D智能分链机器5',3000],
              // ['3D智能分链机器6', 2500],
              // ['3D智能分链机器7', 1000],
              // ['3D智能分链机器8', 2000],
              // ['3D智能分链机器9',3000],
              // ['3D智能分链机器10', 2500],
              // ['3D智能分链机器11', 1000],
              // ['3D智能分链机器12', 2000],
              // ['3D智能分链机器13',3000],
              // ['3D智能分链机器14', 2500],
              // ['3D智能分链机器15', 1000],
            ],
        tableData: [
          // {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
          // {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
          // {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
          // {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
        ]
      };
    },
    methods:{
      getData(){
        this.loading = true;
        this.ajax.get(this.$store.state.api+'/getEchartsData',{
          uid:this.$store.state.userInfo.userid
        }).then(result=>{
          let data = result['data'];
          console.log(data)
          //创客项目人数
          this.HeaderData['people']=data[0][0]['total']
          //目前积累项目数量
          this.HeaderData['project'] = data[1][0]['student']+data[1][0]['wordspace']
          //目前积累活动数量
          this.HeaderData['activity'] = data[2][0]['Maker']+data[2][0]['personal']
          //已支出预算
          let num = 0;
          data[3].forEach(item=>{
            item['isUse'] = 0;
            let isUse =JSON.parse(item['actualuse']);
            for(let i in isUse)item['isUse']+=Number(isUse[i]);
            num+=item['isUse'];
          })
          this.HeaderData['isPay'] = num/10000;
          //扇形图数据
          this.CircularData[0]['value'] = data[2][0]['personal']
          this.CircularData[1]['value'] = data[2][0]['Maker']

          //创客活动资金
          let MakerData = data[3].filter(item=>item.type==0);
          let GroupMakerData = [];
          MakerData.forEach(item=>{
            let addActivity = GroupMakerData.filter(fItem=>fItem['acId']==item['acId']);
            if(addActivity.length!=0){
              addActivity[0]['isUse']+=item['isUse'];
            }else{
              GroupMakerData.push(item);
            }
          })
          GroupMakerData.sort((item1,item2)=>item2['isUse']-item1['isUse']).splice(0,4).sort((item1,item2)=>item1['isUse']-item2['isUse']).forEach(item=>this.HorizontalData.push([item['title'],item['isUse']]))

          //个人创客资金
          let personalData =  data[3].filter(item=>item.type==1);
          console.log(personalData)
          let GroupPersonalData = [];
          personalData.forEach(item=>{
            let addActivity = GroupPersonalData.filter(fItem=>fItem['acId']==item['acId']);
            if(addActivity.length!=0){
              addActivity[0]['isUse']+=item['isUse'];
            }else{
              GroupPersonalData.push(item);
            }
          })
          GroupPersonalData.sort((item1,item2)=>item2['isUse']-item1['isUse']).splice(0,16).sort((item1,item2)=>item1['isUse']-item2['isUse']).forEach(item=>this.ColumnarData.push([item['title'],item['isUse']]))

          //项目排名
          this.tableData = data[4];





          this.loading = false;
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    mounted(){
      this.getData();
    }
  };
  </script>
    
<style lang="less">
  .midBlock{     //中部大饼
    max-width: 100%;
    min-width: 90%;
    height: 400px;
    margin-top: 20px;
    // background: #ce7070;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .mid{
      height: 95%;
      width: 49%;
      padding: 20px;
      box-sizing: border-box;
      background: #f3f6f7;
      overflow: hidden;
    }
  }

  .histogram{       //柱状图
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px;
    min-width: 90%;
    max-width: 100%;
    height: 400px;
    background: #f3f6f7;
    overflow: hidden;
  }
</style>