echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

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

@@ -4,7 +4,7 @@
      stripe
      border
      :data="tableData"
      max-height="tableHeight"
      :max-height="tableHeight"
      :header-cell-style="handleheader"
      :cell-style="handleCellStyle"
      style="width: 100%">
@@ -64,7 +64,11 @@
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div>
    <div v-show="echartsShow" class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div>
    <div class="yincang-box">
      <el-button @click="showEchartsBtn" v-show="echartsShow" type="primary">隐藏</el-button>
      <el-button @click="showEchartsBtn" v-show="!echartsShow" type="primary">显示</el-button>
    </div>
  </div>
</template>

@@ -79,7 +83,8 @@
                yearsData: [],  //x轴数据
                numberData: [],  //柱状图数据（实际培训人数）
                rateData: [],  //折线数据（完成率）
                tableHeight: window.innerHeight - nowSize(1000)
                tableHeight: window.innerHeight - nowSize(1000),
                echartsShow: true
            }
        },
        mounted() {
@@ -87,6 +92,14 @@
          this.getTrainChart()
        },
        methods: {
            showEchartsBtn() {
                this.echartsShow = !this.echartsShow
                if(this.echartsShow) {
                    this.tableHeight = window.innerHeight - nowSize(1000)
                }else {
                    this.tableHeight = window.innerHeight - nowSize(280)
                }
            },
            getTrainTable() {  //查询职业培训统计表格数据接口
                getTrainTable().then(res => {
                   if(res.code == 1000) {
@@ -314,4 +327,12 @@
    height: calc(100% - 2.65625rem  /* 680/256 */);
    margin-top: 0.078125rem  /* 20/256 */;
  }
  .zhiyePeixun-wrap{
    position: relative;
    .yincang-box{
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
</style>