创业担保贷款接口

zhangxiaoxu123456

2022-04-18 89f1ca8bc589aaa6f4909ebef4493063b240a3d1

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue

@@ -1,61 +1,56 @@
<template>
  <div class="zhiyePeixun-wrap">
    <el-table
      stripe
      border
      :data="tableData"
      max-height="650"
      max-height="640"
      :header-cell-style="handleheader"
      style="width: 100%">
      <el-table-column
        fixed="left"
        prop="year"
        label="年份"
        align="center"
        width="200">
        align="center">
      </el-table-column>
      <el-table-column label="补贴性培训" align="center">
        <el-table-column
          label="补贴性培训"
          align="center"
          width="800">
          align="center">
          <el-table-column
            prop="shengtingjihua"
            :label="'省厅计划 \n （人次）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="shijipeixunjihua"
            :label="'实际培训人数 \n （人次）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="wanchenglv"
            label="完成率"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="zhuanzhangzhichu"
            :label="'专账资金支出 \n （万元）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="name"
          label="其中应届毕业学年高校毕业生"
          align="center"
          width="400">
          align="center">
          <el-table-column
            prop="peixunrenshu"
            :label="'培训人数 \n （人次）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="butiejine"
            :label="'补贴金额 \n （万元)'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
        </el-table-column>
      </el-table-column>
@@ -70,11 +65,12 @@
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="zhiyepeixun-echarts"></div>
    <div class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div>
  </div>
</template>

<script>
  import nowSize from "../../../../libs/nowSize";
    export default {
        name: "zhiyePeixun",
        data() {
@@ -117,6 +113,152 @@
                    peixunrenci:'34223'
                }]
            }
        },
        mounted() {
          this.zhiyepeixunEcharts()
        },
        methods: {
            handleheader(data) {
                return {
                    lineHeight: '0',

                }
            },
            zhiyepeixunEcharts() {
                let myEchart = this.$echarts.init(document.getElementById('zhiyepeixunEcharts'))
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        textStyle: {
                            color: '#fff',
                            fontSize: nowSize(28)
                        }
                    },
                    title: {
                      text:'历年职业培训情况分析图',
                      left: 'center',
                      top:'5%',
                      textStyle: {
                          color: '#fff',
                          fontSize: nowSize(30)
                      }
                    },
                    grid: {
                        top: '15%',
                        left: '4%',
                        right: '18%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        data: ['实际培训人数','完成率'],
                        right:'3%',
                        top:'center',
                        orient:'vertical',
                        itemGap: nowSize(50),
                        textStyle: {
                            color:'#fff',
                            fontSize: nowSize(24)
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: nowSize(24)
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#999999",
                                    width: 1,
                                    type: "solid"
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: nowSize(24)
                                }
                            },
                            axisLine: {
                              lineStyle: {
                                  color: "#999999",
                                  width: 1,
                                  type: "solid"
                              }
                            },
                            splitLine: {
                               show: false
                            }
                        },
                        {
                            type: 'value',
                            axisLabel: {
                                show: false,
                                formatter: '{value} %'
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: '实际培训人数',
                            type: 'bar',
                            barWidth: nowSize(48),
                            color:'#51D2FF',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' ml';
                                }
                            },
                            data: [
                                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                            ]
                        },
                        {
                            name: '完成率',
                            type: 'line',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' °C';
                                }
                            },
                            data: [2.0, 4.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                        }
                    ]
                };
                myEchart.setOption(option)
                window.addEventListener('resize',function () {
                    myEchart.resize()
                })
            }
        }
    }
</script>
@@ -125,14 +267,20 @@
  @import "../../../../assets/css/base";
  .zhiyePeixun-wrap{
    width: 100%;
    height: 100%;
    margin-top: 2rem;
    height: calc(100% - 0.078125rem  /* 20/256 */);
    margin-top: 0.078125rem  /* 20/256 */;
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
      background: transparent;
    }
    .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
      background: transparent;
    }
    .el-table th.el-table__cell{
      background-color:$color-blue;
      height: 8rem;
      height: 0.3125rem  /* 80/256 */;
    }
    .el-table tr{
      height: 8rem;
      height: 0.3125rem  /* 80/256 */;
    }
    .el-table tr:nth-child(odd){
      background-color: #CEF2FF;
@@ -153,20 +301,20 @@
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
      line-height: 1.3;
      white-space:pre-line;
    }
    .el-table--border th.el-table__cell, .el-table__fixed-right-patch{
      border-bottom:1px solid $color-grey; /*no*/
      border-bottom:1Px solid $color-grey; /*no*/
    }
    .el-table thead.is-group th.el-table__cell{
      background-color: $color-blue;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom:1px solid $color-grey; /*no*/
      border-bottom:1Px solid $color-grey; /*no*/
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right:1px solid $color-grey; /*no*/
      border-right:1Px solid $color-grey; /*no*/
    }
  }
</style>
@@ -174,7 +322,7 @@
<style lang="scss" scoped>
  .zhiyepeixun-echarts{
    width: 100%;
    height: calc(100% - 68rem);
    margin-top: 2rem;
    height: calc(100% - 2.65625rem  /* 680/256 */);
    margin-top: 0.078125rem  /* 20/256 */;
  }
</style>