ssti-CollegeManage/src/views/echarts.vue

<template>
    <!-- 创业公司登记 -->
    <div class="firm">
      <div class="pAHeader">
        <div class="pAHeader1">数据监测</div>
      </div>
      <hr />
      <!-- 顶部展示信息区开始 -->
      <div class="topDataBlock">    
        <div class="topData">
          <div class="DataTitle">创客项目人数</div>
          <div class="topData_value">
            <span>329</span>
            <span><img src="@/assets/img/upIcon.png"></span>
          </div>
        </div>
        <div class="topData">
          <div class="DataTitle">目前积累创客项目数量</div>
          <div class="topData_value">
            <span>40</span>
          </div>
        </div>
        <div class="topData">
          <div class="DataTitle">创客活动数量</div>
          <div class="topData_value">
            <span>25</span>
          </div>
        </div>
        <div class="topData">
          <div class="DataTitle">学院目前资金总预算</div>
          <div class="topData_value">
            <span>100</span>
            <span>（千万）</span>
          </div>
        </div>
        <div class="topData">
          <div class="DataTitle">已支出预算</div>
          <div class="topData_value">
            <span>25</span>
            <span>（千万）</span>
          </div>
        </div>
        
      </div>
      <!-- 顶部展示信息区结束 -->

      <!-- 中部大饼区开始 -->
     <div class="midBlock">
        <div ref="Circular" class="mid"></div>
        <div ref="Horizontal" class="mid"></div>
     </div>
      <!-- 中部大饼区结束 -->

      <!-- 柱状图区域开始 -->
      <div ref="Columnar" class="histogram"></div>
      <!-- 柱状图区域结束 -->

      <!-- 底部表格区域开始 -->
      <div class="tabTit">
          <div>
              <p>项目排名</p>
          </div>
      </div>

      <div class="projectBlock" style="padding-bottom: 60px;">
      <el-table
      :data="tableData"
      tooltip-effect="dark"
      stripe
      class="fontSize"
      :header-cell-style="{ background: '#3867d6',color:'#fff' }"
      >
     
      <el-table-column
        type="index"
        label="排名"
        align="center"
        width="100">
      </el-table-column>

      <el-table-column
        prop="title"
        label="项目名称"
        align="center">
      </el-table-column>

      <el-table-column
        prop="pro_leader"
        label="项目负责人"
        align="center">
      </el-table-column>

      <el-table-column
        prop="TypeName"
        label="创客类型"
        align="center">
      </el-table-column>

      <el-table-column
        prop="Activity"
        label="活跃度"
        align="center">
      </el-table-column>

      <el-table-column
        prop="ClassName"
        label="所属学院"
        align="center">
      </el-table-column>
     
    </el-table>
    </div>
<!-- 通知表格结束-->
      <!-- 底部表格区域结束 -->


    </div>
  </template>
    
  <script>
 import * as echarts from 'echarts';
  export default {
   
    data() {
      return {
        //圆形
        CircularData:{
          title:{
            text:"创新创业项目类型"
          },
          legend: {
            data:[
              "创客活动",
              "个人创客"
            ],
            orient: 'vertical',
            top:"10%",
            left:"left"
          },
          series: [
            {
              type: 'pie',
              label: {
                show:true,
                position:"inner",
                formatter:'{d}%'
              },
              data: [
                {
                  value: 30,
                  name:"创客活动"
                },
                {
                  value: 70,
                  name:"个人创客"
                },
              ],
            }
          ]
        },
        //横行的柱状
        HorizontalData:{
          grid: {
            top: 80, // 设置网格顶部的边距为 50px 
            left:10,
            bottom:0,
            right:"100px"
            // left:'-10px'
          },
          title:{
            text:"创客活动资金"
          },
          dataset: {
            source: [
              ['amount', 'product'],
              [ 0, '物联网激光切割器'],
              [ 1000, '人工智能领跑马拉松'],
              [ 2000, '3D演奏智能工具'],
              [ 3000, '人工智能分链机器'],
            ],
          },
          xAxis: { 
            position:"top",
            name:"单位：万元",
            nameTextStyle:{
              fontSize:14,
              align:"left",
              verticalAlign:"bottom",
              padding:[0,0,7,10],
            }
          },
          yAxis: {
            type: 'category',
            zlevel:1,
            axisLabel:{
              inside:true,
              margin:4,
              formatter: function (value) {
                const vl = Math.floor(value.length/2);
                let newText = value.slice(0,vl)+'\n'+value.slice(vl)
                return newText;
            },
            color:(value,index)=>{
              const textWidth = this.HorizontalData['dataset']['source'][this.HorizontalData['dataset']['source'].length-1][0]/6/2;
              const vl = this.HorizontalData['dataset']['source'][index+1][0]
              return vl >= textWidth ? 'white' : '#3c4654';
            }
            },
          },
          series: [
            {
              type: 'bar',
              barWidth:55,
              label:{
                show:true,
                position:"right"
              },
              encode: {
                x: 'amount',
                y: 'product'
              },
              itemStyle:{
                color:"#3eb370"
              }
            }
          ]
        },
        // 柱状
        ColumnarData:{
          grid: {
            top: 80,
          },
          title:{
            text:"个人创客资金",
            top:0
          },
          dataset: {
            // 提供一份数据。
            source: [
              ['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],
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: { 
            type: 'category',
            axisLabel: {
              formatter: function (value) {
                // 设置每行显示的最大字符数
                var maxLength = 4;
                // 计算文本需要换行的行数
                var rowNumber = Math.ceil(value.length / maxLength);
                // 拼接换行后的文本
                var newText = '';
                for (var i = 0; i < rowNumber; i++) {
                  var start = i * maxLength;
                  var end = start + maxLength;
                  newText += value.slice(start, end) + '\n';
                }
                return newText;
              }
            }
          },
          // 声明一个 Y 轴，数值轴。
          yAxis: {
            name:"单位：万元",
            nameTextStyle:{
              fontSize:14,
              align:"center",
            }
          },
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [{ type: 'bar' ,itemStyle:{color:"#5aaef3"}}]
        },
        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: {
      setCircularData(){
        const Circular = echarts.init(this.$refs['Circular']);
        Circular.setOption(this.CircularData)
      },
      setHorizontalData(){
        const Horizontal = echarts.init(this.$refs['Horizontal']);
        Horizontal.setOption(this.HorizontalData)
      },
      setColumnarData(){
        const Columnar = echarts.init(this.$refs['Columnar']);
        Columnar.setOption(this.ColumnarData)
      }
    },
    mounted() {
      this.setCircularData();
      this.setHorizontalData();
      this.setColumnarData();
    },
  };
  </script>
    
<style lang="less">
  .topDataBlock{
    margin-top: 20px;
    width: 100%;
    height: 130px;
    // background: #b65f5f;
    display: flex;
    justify-content:space-between;
    align-items: center;
    .topData{
      width: 19%;
      height: 94%;
      border-radius: 5px;
      box-sizing: border-box;
      // padding: 15px 10px 10px 35px;
      .DataTitle{
        margin: 15px 10px 10px 35px;
        color: white;
        font-size: 18px;
        position: relative;
        &::after{
          content: '';
          display: block;
          position: absolute;
          width: 7px;
          height: 86%;
          top: 7%;
          left: -15px;
          background-color: white;
        }
      }
      .topData_value{
        width: auto;
        height: 40%;
        margin: 15px 20px 10px 20px;
        display: flex;
        align-items: center;
        color: white;
        span{
          height: 100%;
          display: flex;
          // align-items: flex-end;
        }
        span:nth-of-type(1){
          font-size: 2.8em;
        }
        span:nth-of-type(2){
          align-items: flex-end;
          img{
            height: 32px;
            margin-left: 5px;
          }
        }
      }
    }
    .topData:nth-child(1){
      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
    }
    .topData:nth-child(2){
      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
    }
    .topData:nth-child(3){
      background-image: linear-gradient(100deg, #3ce0ea 60%,#29bfa3);
    }
    .topData:nth-child(4){
      background-image: linear-gradient(100deg, #3caef5 60%,#497df5);
    }
    .topData:nth-child(5){
      background-image: linear-gradient(100deg, #fcb871 60%,#f77c5f);
    }
  }
  .midBlock{     //中部大饼
    width: 100%;
    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;
    }
  }

  .histogram{       //柱状图
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 400px;
    background: #f3f6f7;
  }

  .el-table__header{
    height:60px;
  }
  .el-table__row{
    height: 60px;
  }
</style>