echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue

@@ -3,6 +3,7 @@
    <div class="shebaoShouzhiZongbiao-table">
      <h1>社会保障基金统计表</h1>
      <el-table
        :max-height="tableHeight"
        :data="tableData"
        :cell-style="handleCellStyle"
        style="width: 100%">
@@ -215,7 +216,11 @@
          </template>
        </el-table-column>
      </el-table>
      <div class="shebaoShouzhiZongbiaoEcharts" id="shebaoShouzhiZongbiaoEcharts"></div>
      <div v-show="echartsShow" class="shebaoShouzhiZongbiaoEcharts" id="shebaoShouzhiZongbiaoEcharts"></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>
  </div>
</template>
@@ -231,7 +236,9 @@
      tableHead:[],
      tableData:[],
      headerArry:{},
      echartsSeries:{}
      echartsSeries:{},
      tableHeight: window.innerHeight - nowSize(960),
        echartsShow: true
    }
  },
  mounted() {
@@ -239,6 +246,14 @@
     this.getStatisticsChart()
  },
  methods: {
      showEchartsBtn() {
          this.echartsShow = !this.echartsShow
          if(this.echartsShow) {
              this.tableHeight = window.innerHeight - nowSize(960)
          }else {
              this.tableHeight = window.innerHeight - nowSize(320)
          }
      },
      getStatisticsTable() {
          getStatisticsTable().then(res => {
              if(res.code == 1000) {
@@ -455,4 +470,12 @@
    height: calc(100% - 640px - 0.33203125rem  /* 85/256 */);
  }
}
.shebaoShouzhiZongbiao-table{
  position: relative;
  .yincang-box{
    position: absolute;
    right: 0.078125rem  /* 20/256 */;
    bottom: 0.078125rem  /* 20/256 */;
  }
}
</style>