快捷導(dǎo)航

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

更新時(shí)間：2020年07月20日 09:05:08 作者：kirinlau

這篇文章主要介紹了基于Echarts圖表在div動(dòng)態(tài)切換時(shí)不顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

簡(jiǎn)單粗暴，先上圖，大概長(zhǎng)這樣：

在使用vue時(shí)有遇到像上圖下拉框change事件切換div，change切完后大概會(huì)變成這個(gè)樣子：

上代碼：

<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: '分時(shí)警情', value: 'timeshare' },
         { text: '接警與處置', value: 'receive' }
        ],
        isvisible:true
      }
    },


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

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

code：

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

這樣就變成了true, false。

那么問題來了：

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

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

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

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

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