解決vue頁面渲染但dom沒渲染的操作

更新時間：2020年07月27日 09:10:15 作者：田淼csdn

這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

我就廢話不多說了，大家還是直接看代碼吧~

this.$nextTick(() => {
            $("select[name='ddlCostCenter']").select2({
              language: "zh-CN"
            });
          });

補充知識：vue+Echarts動態(tài)數(shù)據(jù)已經(jīng)賦值，但是無法渲染頁面的問題

最近用vue+Echarts想做一個餅狀統(tǒng)計圖，但是數(shù)據(jù)明明已經(jīng)綁定完畢，但是頁面渲染一直沒有效果，最終才發(fā)現(xiàn)問題所在，自己還是個新手，主要對vue還不是很熟悉。廢話不說，接下來看我的代碼：

正常的給個div的大小

 <div>
  <div id="echartss" :style="{width: '100%', height: '600px'}"></div>
 </div>

接下來是option部分：

 echarts1_option:{
      backgroundColor: '#45515a', //背景顏色
      //標題
      title: {
       text: '訂單中保險公司所占的比例',
       subtext: '餅圖示例',
       left: 'center',
       top: 20,
       textStyle: {
        color: '#ccc',
        fontStyle: 'italic'//標題字體
       }
      },
      //彈窗，響應鼠標指向，顯示具體細節(jié)
      tooltip : {
       trigger: 'item',//以具體項目觸發(fā)彈窗
       formatter: "{a} <br/> : {c} (vvxyksv9kd%)",
      },
      //圖例，選擇要顯示的項目
      legend:{
       orient:'vertical',
       left:'left',
       textStyle:{
        color:'#c8c8d0'
       },
       data:['安心','安盛天平','中華聯(lián)合保險','中國太平洋保險','中國人保財險','平安車險'] //注意要和數(shù)據(jù)的name相對應
      },
      //工具箱
      toolbox:{
       show:true,//顯示工具箱
       feature:{
        dataView:{show:true}, //以文字形式顯示數(shù)據(jù)
        restore:{show:true},  //還原
        //dataZoom:{show:true}, //區(qū)域縮放
        saveAsImage:{show:true}, //保存圖片
        //magicType:{type:['line','bar']}//動態(tài)數(shù)據(jù)切換，數(shù)據(jù)顯示可以在該規(guī)定內(nèi)容中切換顯示方式，
       }
      },
      /*//視覺映射組件，將數(shù)據(jù)映射到視覺元素上
      visualMap: {
       show: false,
       min: 1,
       max: 2,
       dimension: 0, //選取數(shù)據(jù)的維度，如人數(shù)據(jù)：[身高，體重]，則1代表將體重進行映射，默認值為數(shù)組的最后一位
       // seriesIndex: 4, //選取數(shù)據(jù)集合中的哪個數(shù)組，如{一班}，{二班}，默認選取data中的所有數(shù)據(jù)集
       inRange: {
        //選定了要映射的對象，用inRange詳細寫要渲染的具體細節(jié)，[x，y]中x指最小值對應的量（亮度，飽和度等），y指最大值對應的量，其余的按各自value線性渲染
        color:['red'],
        colorLightness: [0,1],
        colorSaturation:[0,1]
       }
      },*/
      //數(shù)據(jù)
      series : [
       {
        name: '成交數(shù)量',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data:[

        ].sort(function (a, b) {
         return a.value - b.value;
        }),

        roseType: 'radius',//角度和半徑展現(xiàn)百分比，'area'只用半徑展現(xiàn)
        label: { //餅圖圖形的文本標簽
         normal: { //下同，normal指在普通情況下樣式，而非高亮時樣式
          textStyle: {
           color: 'rgba(255, 255, 255, 0.3)'
          }
         }
        },
        labelLine: { //引導線樣式
         normal: {
          lineStyle: {
           color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.5, //0-1，越大越平滑彎曲
          length: 10, //從塊到文字的第一段長
          length2: 20 //拐彎到文字的段長
         }
        },

        itemStyle: { //圖例樣式
         normal: {
           //color: '#97413c',
          shadowBlur: 50,//陰影模糊程度
          shadowColor: 'rgba(0, 0, 0, 0.5)',//陰影顏色，一般黑

         }
        },
        animationType: 'scale', //初始動畫效果，scale是縮放，expansion是展開
        animationEasing: 'elasticOut', //初始動畫緩動效果
        animationDelay: function (idx) { //數(shù)據(jù)更新動畫時長，idx限定了每個數(shù)據(jù)塊從無到有的速度
         return Math.random() * 200;
        }


       }
      ],
      color: ['#97858c','pink','green','yellow','orange','#97813c'],
     },

接下來看init代碼

init(){
     // 基于準備好的dom，初始化echarts實例
     let myChart = echarts.init(document.getElementById('echartss'))
     // 繪制圖表，this.echarts1_option是數(shù)據(jù)
     myChart.setOption(this.echarts1_option,true)
    },

然后是給動態(tài)數(shù)據(jù)賦值代碼（從后臺接口取得的數(shù)據(jù)）

 drawline() {
     // 數(shù)據(jù)初始化
     API.account.getAccount().then(({data}) => {
      if (data && data.code == 0) {
       this.echarts1_option.series[0].data=data.data.list;
      } else {
       this.$Message.error(data.msg);
      }
     }).catch((data) => {
      this.$Message.error('連接失敗，請檢查網(wǎng)絡！');
     });

    },

到目前為止，頁面的結果是：

頁面完全沒有效果：

在加上下面代碼后：

//數(shù)據(jù)自動刷新，必然需要一個監(jiān)聽機制告訴Echarts重新設置數(shù)據(jù)
  watch: {
   //觀察option的變化
   echarts1_option: {
    handler(newVal, oldVal) {
     if (this.myChart) {
      if (newVal) {
       this.myChart.setOption(newVal);
      } else {
       this.myChart.setOption(oldVal);
      }
     } else {
      this.init();
     }
    },
    deep: true //對象內(nèi)部屬性的監(jiān)聽，關鍵。
   }
  },

我們再看看運行結果：