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

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

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

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

正常的給個div的大小

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

接下來是option部分：

echarts1_option:{ backgroundColor: ’#45515a’, //背景顏色 //標(biāo)題 title: { text: ’訂單中保險公司所占的比例’, subtext: ’餅圖示例’, left: ’center’, top: 20, textStyle: {color: ’#ccc’,fontStyle: ’italic’//標(biāo)題字體 } }, //彈窗，響應(yīng)鼠標(biāo)指向，顯示具體細(xì)節(jié) tooltip : { trigger: ’item’,//以具體項目觸發(fā)彈窗 formatter: '{a} <br/> : {c} (dv1hrpp7z%)', }, //圖例，選擇要顯示的項目 legend:{ orient:’vertical’, left:’left’, textStyle:{color:’#c8c8d0’ }, data:[’安心’,’安盛天平’,’中華聯(lián)合保險’,’中國太平洋保險’,’中國人保財險’,’平安車險’] //注意要和數(shù)據(jù)的name相對應(yīng) }, //工具箱 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代表將體重進(jìn)行映射，默認(rèn)值為數(shù)組的最后一位 // seriesIndex: 4, //選取數(shù)據(jù)集合中的哪個數(shù)組，如{一班}，{二班}，默認(rèn)選取data中的所有數(shù)據(jù)集 inRange: {//選定了要映射的對象，用inRange詳細(xì)寫要渲染的具體細(xì)節(jié)，[x，y]中x指最小值對應(yīng)的量（亮度，飽和度等），y指最大值對應(yīng)的量，其余的按各自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: { //餅圖圖形的文本標(biāo)簽 normal: { //下同，normal指在普通情況下樣式，而非高亮?xí)r樣式 textStyle: { color: ’rgba(255, 255, 255, 0.3)’ } }},labelLine: { //引導(dǎo)線樣式 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(){ // 基于準(zhǔn)備好的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)絡(luò)！’); }); },

到目前為止，頁面的結(jié)果是：

頁面完全沒有效果：

在加上下面代碼后：

//數(shù)據(jù)自動刷新，必然需要一個監(jiān)聽機(jī)制告訴Echarts重新設(shè)置數(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)聽，關(guān)鍵。 } },

我們再看看運(yùn)行結(jié)果：

數(shù)據(jù)雖然刷新了，但是我們的Echart’s組件卻不知道，必須有個watch過程。

以上這篇解決vue頁面渲染但dom沒渲染的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。