echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

echarts添加显示隐藏按钮

 src/pages/components/juminYanglaoBaoxian/baoxianForm.vue

@@ -7,7 +7,7 @@
      style="width: 100%"
      :data="tableData">
      <el-table-column
        width="200"
        min-width="140"
        align="center"
        prop="areaName"
        label="县（市、区）">

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

@@ -97,7 +97,11 @@
            label="当前完成率">
          </el-table-column>
        </el-table>
        <div class="laogongJiuyeEcharts" id="laogongJiuyeEcharts"></div>
        <div v-show="echartsShow" class="laogongJiuyeEcharts" id="laogongJiuyeEcharts"></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>
@@ -114,7 +118,8 @@
                loseReEmployment:[], //失业人员再就业
                diffReEmployment: [],  //就业困难人员再就业
                xdata:[],
                tableHeight: window.innerHeight - nowSize(960)
                tableHeight: window.innerHeight - nowSize(960),
                echartsShow: true
            }
        },
        mounted() {
@@ -123,6 +128,14 @@
          this.laogongJiuyeEcharts()
        },
        methods: {
            showEchartsBtn() {
              this.echartsShow = !this.echartsShow
                if(this.echartsShow) {
                    this.tableHeight = window.innerHeight - nowSize(960)
                }else {
                    this.tableHeight = window.innerHeight - nowSize(320)
                }
            },
            getLabourTable() {  //查询劳动就业表格数据接口
                getLabourTable().then(res => {
                    if(res.code == 1000) {
@@ -348,6 +361,11 @@
         font-family: Source Han Sans CN, Source Han Sans CN-Regular;
         font-weight: 400;
       }
      .yincang-box{
       position: absolute;
       right: 20px;
       bottom: 20px;
      }
     }
    .laogongJiuyeEcharts{
      height: calc(100% - 2.5rem  /* 640/256 */ - 0.33203125rem  /* 85/256 */);

 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>

 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 */

 src/pages/show/personnelTalents/PersonnelTalents.vue

@@ -70,6 +70,7 @@

.personnelTalents__warp {
  width: 100%;
  height: calc(100% - 0.078125rem  /* 20/256 */);
  padding: 0.078125rem /* 20/256 */
;
  box-sizing: border-box;

 src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue

@@ -46,9 +46,12 @@
          </el-radio>
        </el-radio-group>
      </div>
      <div class="PT_unitPersonnel--Echarts" v-show="isShow"></div>
      <div class="PT_unitPersonnel--Echarts" v-show="echartsShow"></div>
    </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>

@@ -144,7 +147,7 @@
      checkedCategory: '事业单位',
      CARE_GORY: ['事业单位', '在职人员', '年人均收入'],
      tableHeight: window.innerHeight - nowSize(1000),
      isShow: true,
      echartsShow: true,
      echartSeries: {},
      selectIndex: {
        type: 1
@@ -157,6 +160,14 @@
    this.getUnitLine()
  },
  methods: {
    showEchartsBtn() {
        this.echartsShow = !this.echartsShow
        if(this.echartsShow) {
            this.tableHeight = window.innerHeight - nowSize(960)
        }else {
            this.tableHeight = window.innerHeight - nowSize(320)
        }
    },
    mergeColumnTableCell({rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
@@ -444,7 +455,12 @@
.PersonnelTalents_unitPersonnel--warp {
  width: 100%;
  height: 100%;

  position: relative;
  .yincang-box{
    position: absolute;
    right: 0.078125rem  /* 20/256 */;
    bottom: 0;
  }
  .PT_unitPersonnel--table {
    width: 100%;
  }
@@ -457,7 +473,6 @@
    height: calc(100% - 2.5rem/* 640/256 */ - 0.254375rem /* 60/256 */
    );
    position: relative;

    .PT_navEchart--title {
      width: 1px;
      display: inline-block;

 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>

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

@@ -86,7 +86,11 @@
        </el-table-column>
      </el-table>
    </div>
      <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div>
    <div v-show="echartsShow" class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></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>

@@ -103,7 +107,8 @@
                juminData: [],  //城乡居民养老保险参保人数
                gongshangData: [],  //工伤保险参保人数
                shiyeData: [],  //失业保险参保人数
                tableHeight: window.innerHeight - nowSize(960)
                tableHeight: window.innerHeight - nowSize(960),
                echartsShow: true
            }
        },
        mounted() {
@@ -111,6 +116,14 @@
          this.getPersonChart()
        },
        methods: {
            showEchartsBtn() {
                this.echartsShow = !this.echartsShow
                if(this.echartsShow) {
                    this.tableHeight = window.innerHeight - nowSize(960)
                }else {
                    this.tableHeight = window.innerHeight - nowSize(320)
                }
            },
            getPersonTable(){
                getPersonTable().then(res => {
                    if(res.code == 1000) {
@@ -301,6 +314,12 @@
  .shehuiBaoxian-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    .yincang-box{
      position: absolute;
      right: 0.078125rem  /* 20/256 */;
      bottom: 0.078125rem  /* 20/256 */;
    }
    .shehuiBaoxian-table{
      width: 100%;
      position: relative;