echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

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

@@ -46,16 +46,19 @@
          </el-radio>
        </el-radio-group>
      </div>
      <div class="PT_unitPersonnel--Echarts"></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>

<script>

import nowSize from "../../../../libs/nowSize";
import {getPersonTable} from '@/api/personnelTalents'
import {getPersonTable, getUnitLine} from '@/api/personnelTalents';

export default {
  name: "PersonnelTalents_UnitPersonnel",
@@ -143,14 +146,28 @@
      ],
      checkedCategory: '事业单位',
      CARE_GORY: ['事业单位', '在职人员', '年人均收入'],
      tableHeight: window.innerHeight - nowSize(1000)
      tableHeight: window.innerHeight - nowSize(1000),
      echartsShow: true,
      echartSeries: {},
      selectIndex: {
        type: 1
      }
    }
  },
  mounted() {
    this.Init_echarts()
    this.getPersonTable()
    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) {
@@ -176,7 +193,7 @@
      const option = {
        color: ['#FF5151', '#51FF5D', '#FFD151'],
        title: {
          text: '历年全市居民人均可支配收入分析图',
          text: '近一年事业数量变化趋势图',
          left: 'center',
          top: '5%',
          textStyle: {
@@ -214,7 +231,7 @@
          containLabel: true
        },
        xAxis: {
          name: '单位：年',
          name: '单位：年/月',
          nameTextStyle: {
            color: '#FFFFFF',
            fontSize: nowSize(24)
@@ -222,7 +239,7 @@
          nameGap: nowSize(92),// 坐标轴名称与轴线之间的距离。
          type: 'category',
          boundaryGap: false,// 坐标轴两端留白
          data: ['2017年', '2018年', '2019年', '2020年', '2021年'],
          data: this.echartSeries.years,
          axisLabel: {
            show: true,
            textStyle: {
@@ -242,7 +259,7 @@
          }
        },
        yAxis: {
          name: '单位：年',
          name: '单位：家',
          nameTextStyle: {
            color: '#FFFFFF',
            fontSize: nowSize(24)
@@ -269,19 +286,19 @@
        },
        series: [
          {
            name: '居民人均可支配收入',
            name: '全市',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230]
            data: this.echartSeries.quanshi
          },
          {
            name: '城镇居民',
            name: '市直',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330]
            data: this.echartSeries.shizhi
          },
          {
            name: '农村居民',
            name: '县（市、区）',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330]
            data: this.echartSeries.xian
          }
        ]
      };
@@ -292,13 +309,25 @@
    },
    // 通过点击更换echarts图表信息
    selectEcharts(index) {
      console.log(index);
      this.selectIndex.type = index + 1
      this.getUnitLine()
      this.Init_echarts()
    },
    // 29. 查询事业单位人员情况表格数据接口
    getPersonTable() {
      getPersonTable().then(res => {
        if (res.code === 1000) {
          this.tableData = res.list
        }
      })
    },
    // 41.查询事业年度变化情况折线图数据接口
    getUnitLine() {
      getUnitLine(this.selectIndex).then(res => {
        if (res.code === 1000) {
          this.echartSeries = res.obj
          console.log(this.echartSeries);
          this.Init_echarts()
        }
      })
    }
@@ -426,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%;
  }
@@ -439,7 +473,6 @@
    height: calc(100% - 2.5rem/* 640/256 */ - 0.254375rem /* 60/256 */
    );
    position: relative;

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