欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Echarts圖表在div動態(tài)切換時不顯示的解決方式

 更新時間:2020年07月20日 09:05:08   作者:kirinlau  
這篇文章主要介紹了基于Echarts圖表在div動態(tài)切換時不顯示的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

簡單粗暴,先上圖,大概長這樣:

在使用vue時有遇到像上圖下拉框change事件切換div,change切完后大概會變成這個樣子:

上代碼:

<div class="test">
  <p class="title">
    <select v-model="selected" v-on:change="change">
     <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
     </option>
    </select>
  </p>

  <span>{{selected}}</span>
  <div id="timesharechart" v-show="isvisible" ></div> 
  <div id="receiveDispose" v-show="!isvisible"></div> 
</div>

<script>
  export default{
    name:"test",
    data(){
      return {
        selected: 'timeshare',
        options: [
         { text: '分時警情', value: 'timeshare' },
         { text: '接警與處置', value: 'receive' }
        ],
        isvisible:true
      }
    },


    methods:{
      change:function(){
        if(this.selected == "receive"){
          this.isvisible = false;
        }else{
          this.isvisible = true;
        }
      },
</script>

這里時我們?yōu)榱舜_定當(dāng)前顯示的是哪個block,所以在data中引入了“selected”,方便其他操作,其實完全可以采用change事件和v-if指令來判斷 true和false的方法來切換block。

code:

change:function(){
        if(this.isvisible == true){
          this.isvisible = false;
        }else{
          this.isvisible = true;
        }
      }

這樣就變成了true, false。

那么問題來了:

以上解決了change事件對div圖表容器的切換顯示內(nèi)容,但是問題是切換后不顯示圖表,控制臺報錯:“Can't get dom width or height”,檢查了遍div容器是設(shè)置了大小的,上網(wǎng)一查才知道是因為echarts只能在顯示的容器中渲染,解決辦法:在容器切換之后再渲染圖表,也就是在觸發(fā)切換的事件中操作echarts初始化,我是這么解決的,在調(diào)用echart.init之前,給圖形dom加上對應(yīng)的寬度和高度。

drawCharts(){
   // 基于準(zhǔn)備好的dom,初始化echarts實例,dom容器中需要在調(diào)用echart.init之前,必須給圖形dom加上對應(yīng)的寬度和高度,不然echarts不能渲染
   document.getElementById("container").style.display = "block";
   let myChart = this.$echarts.init(document.getElementById('container'));
        // 繪制圖表
        receiveChart.setOption({});
  }

其他tab,button等切換方式如出一轍。

補(bǔ)充知識:echarts切換后頁面空白

我遇到的問題是切換后頁面空白,切換第二次頁面出現(xiàn)了echarts圖。為了解決這個問題,我再頁面初始化時就調(diào)用了隱藏的echarts方法,雖然解決了第一次切換沒圖的問題,但同時出現(xiàn)了第二個問題,echarts圖的大小需要在改變?yōu)g覽器后才跟設(shè)置大小一致。

后面通過百度說寬高必須限制死,所以我把寬度從百分比設(shè)置為600px,暫時解決這個問題。

以上這篇基于Echarts圖表在div動態(tài)切換時不顯示的解決方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論