echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

 src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue

@@ -102,7 +102,11 @@
      </el-table>
    </div>
    <!--图表-->
    <div class="OtherB-PeopleJunShouRu__echart">
    <div class="OtherB-PeopleJunShouRu__echart"  v-show="echartsShow">
    </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>
@@ -115,6 +119,7 @@
  name: "OtherB_PerpleJunShouRu",
  data() {
    return {
      echartsShow: true,
      tableData: [
        // {
        //   year: 2020,
@@ -156,6 +161,14 @@
    this.getIncomeLine()
  },
  methods: {
      showEchartsBtn() {
          this.echartsShow = !this.echartsShow
          if(this.echartsShow) {
              this.tableHeight = window.innerHeight - nowSize(960)
          }else {
              this.tableHeight = window.innerHeight - nowSize(320)
          }
      },
    // 31. 查询居民人均可支配收入表格数据接口
    getIncomeTable() {
      getIncomeTable().then(res => {
@@ -382,9 +395,14 @@

.OtherB_PerpleJunShouRu__wrap {
  width: 100%;
  //height: calc(100% - 0.078125rem /* 20/256 */
  //);

  height: calc(100% - 0.078125rem /* 20/256 */
  );
  position: relative;
  .yincang-box{
    position: absolute;
    right: 0.078125rem  /* 20/256 */;
    bottom: 0;
  }
  .OtherB-PeopleJunShouRu__table {
    width: 100%;
    margin-top: 0.078125rem /* 20/256 */