vue中使用echarts圖表功能，點擊事件改變父級div窗體大小，echarts圖表展示也跟着改變

    項目中需要使用echarts圖表功能。剛開始都是一個echarts圖表排成一排。沒有內容的時候顯得非常空而亂。於是改成一排兩個，但是又出現新的問題了。如果查詢數據比較多的時候，內容都擠在一起了，非常不友好。於是想到一個可以放大縮小的功能，這樣不就很完美了。想法不錯，實現起來卻遇到了困難。於是網上找，甚至在博客園發問。可能描述不夠清晰。

提問連接：https://q.cnblogs.com/q/129882/

 

  這個周末雙休，於是在家來實踐摸索一下。花了幾個小時，總算勉強實現我想要的效果了。

  先看看效果，不然不知道我要說什么。

  初始狀態下的界面

 

 點擊第一個放大后的界面

 

 

 

在點擊第二個放大效果

 

 

 

 點擊第一個縮小后的效果

 

 

就是這樣，每個圖表都可以放大縮小，然后改變顯示效果。

之前想法是通過事件去改變框架自帶的樣式——lg屬性，后面發現不行。於是自定義了一個樣式名來控制，內容是一樣的。如果不是vue 我早就想到了。因為以前做過類似的。

這還只是一個demo形式，真正移到項目里還需要做一些調整，改變窗體的時候，echarts圖表並沒有發生改變。

 實踐代碼，差點忘記添加了。

<template>
  <div class="chart-container">
    <div class="card-item">
         <el-row :gutter="20">

   

 <el-col :xs="24" :sm="12" :class="chagneclass1==true?'chy-big':''">
             <div class="card-panel">
              <div class="card-panel-content">
                <div class=" chy-datashow" id='gCarWasherNum' name='gCarWasherNum' ref="gCarWasherNum">
                <div class="chart-title">
                  <span>測試數據一</span>
                   <div class="changezoom">
                    <span class="chy-span " :class="chagneclass1==false?'chy-disable':'chy-enable'" @click="change(1,false)">縮小</span>
                    <span class="chy-span " :class="chagneclass1==false?'chy-enable':'chy-disable'" @click="change(1,true)">放大</span>
                  </div>
                </div>
                <div class="chy-datetime">
                      <el-date-picker
                      class="right-data-picker"
                      v-model="monthDateSpan"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="—"
                      start-placeholder="開始日期"
                      end-placeholder="結束日期"
                      :picker-options="monthPickerOptions"
                      :editable="false"
                    ></el-date-picker>
                </div>
                <div class="chart-wrapper">
                   <!-- <chart height="300px" width="100%" /> -->
                    <div style="width:100%;height:300px" ref="chart1"></div>
                </div>
            
              </div>
              </div>
            </div>
         </el-col>
     <el-col :xs="24" :sm="12"  :class="chagneclass2==true?'chy-big':''">
             <div class="card-panel">
              <div class="card-panel-content">
                <div class=" chy-datashow" id='gCarWasherNum' name='gCarWasherNum' ref="gCarWasherNum">
                <div class="chart-title">
                  <span>測試數據二</span>
                   <div class="changezoom">
                     <span class="chy-span " :class="chagneclass2==false?'chy-disable':'chy-enable'" @click="change(2,false)">縮小</span>
                     <span class="chy-span " :class="chagneclass2==false?'chy-enable':'chy-disable'" @click="change(2,true)">放大</span>
                  </div>
                </div>
                <div class="chy-datetime">
                      <el-date-picker
                      class="right-data-picker"
                      v-model="monthDateSpan"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="—"
                      start-placeholder="開始日期"
                      end-placeholder="結束日期"
                      :picker-options="monthPickerOptions"
                      :editable="false"
                    ></el-date-picker>
                </div>
                <div class="chart-wrapper">
                   <!-- <chart height="300px" width="100%" /> -->
                    <div style="width:100%;height:300px" ref="chart2"></div>
                </div>
            
              </div>
              </div>
            </div>
         </el-col>
    </el-row>
         </div>
  </div>
</template>

<script>
//import Chart from '@/components/Charts/LineMarker'
const echarts = require('echarts');
export default {
  name: 'LineChart',
  //components: { Chart },
  data(){
    return{
      monthPickerOptions: {},
      monthDateSpan: [],
      beginTime:'',
      endTime:'',
      chagneclass1:true,
      chagneclass2:false,
      chart1:null,
      chart2:null

    }
  },
   mounted(){
            this.initCharts();
            this.initCharts2();
           // this.init();
     },
   methods:{
           initCharts () {
               this.chart1 = echarts.init(this.$refs.chart1);
               // 繪制圖表
               this.chart1.setOption({
                  // title: { text: '在Vue中使用echarts' },
                   tooltip: {},
                   xAxis: {
                       data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                   },
                   yAxis: {},
                   series: [{
                       name: '銷量',
                       type: 'bar',
                       data: [5, 20, 36, 10, 10, 20]
                   }]
               });
                   window.addEventListener('resize',function () {//執行
                      this.chart1.resize();
              })
                // 監聽側邊欄的變化
               this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
               this.sidebarElm &&
                this.sidebarElm.addEventListener(
                  'transitionend',
                  function () {//執行
                    this.chart1.resize();
           })
           },
           initCharts2 () {
              this.chart2= echarts.init(this.$refs.chart2);
              // console.log(this.$refs.myPie);
               // 繪制圖表
               this.chart2.setOption( {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
});

                window.addEventListener('resize',function () {//執行
                      this.chart2.resize();
              })

                this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
               this.sidebarElm &&
                this.sidebarElm.addEventListener(
                  'transitionend',
                  function () {//執行
                    this.chart2.resize();
           })
           },

          //  init() {  //關鍵三   init的時候使用定時器監聽窗口的變化，再調用echarts的resize方法
          //      setTimeout(() => {
          //          window.addEventListener('resize', () => {
          //              this.chart.resize();
          //              this.myPie.resize();
          //          })
          //      }, 20)
          //  },

          //  destroyed() {   //關鍵四   定時清除init帶來的定時器
          //      window.removeEventListener('resize', this.init, 20)
          //  },

        change(item,obj){

         if(item=='1'){
            this.chagneclass1=obj
         }
         else if(item=='2'){
            this.chagneclass2=obj
         }  
          this.init(item)
            
          },
        init(item) {  //關鍵三   init的時候使用定時器監聽窗口的變化，再調用echarts的resize方法
               setTimeout(() => {
                 if(item=='1'){
                    this.chart1.resize();
                 }
                 else if(item=='2'){
                    this.chart2.resize();
                 }
                      
               }, 20)
           },
     }
}
</script>

<style scoped lang="scss">
.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  background-color: gray;
}

.chy-datashow{
  position: relative;
  .chy-datetime{
    margin: 5px;
    // z-index: 8;
    // position: absolute;
    //   top: 55px;
    //   right: 20px;
    //   text-align: center;
    //   margin: auto;
  }
.chart-title{
  // margin-bottom: 45px;
  margin: 5px;
  font-size: 16px;
  font-weight: bold;
  position:relative;
  width: 100%;
}
.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
    width: 300px !important;
 }
}

.card-item{
@media only screen and (min-width: 1200px){

 .chy-big{
     width: 100%;
   }
  .changezoom{
     position:absolute;right:0;top:0;
     width: 100px;
     height: 30px;
     font-size: 14px;
   
     .chy-span{
       display: inline-block;
       margin: 0 2px;
     }
     .chy-disable{
      color: gray;
     }
    .chy-enable{
        color: #3AD1C5;
     }
  }
}

@media screen and (max-width: 1200px) { 
  .changezoom{
    display: none;
  }
  }
    .card-panel:hover{
      border: 2px solid #3AD1C5 !important ;
    }
    .card-panel{
      background-color: white;
      border-radius: 10px;
      border: 2px solid white !important ;
      margin: 5px 0;
  }    
  .card-panel-content{
    padding: 10px;
  }
}
.chy_summary{
  position: relative;
    font-size: 16px;
    min-height: 20px;
    top: 55px;
}    
</style>

 

參考：https://blog.csdn.net/qq_34312235/article/details/100920873