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

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

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

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

正常的給個(gè)div的大小

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

接下來(lái)是option部分：

echarts1_option:{ backgroundColor: ’#45515a’, //背景顏色 //標(biāo)題 title: { text: ’訂單中保險(xiǎn)公司所占的比例’, subtext: ’餅圖示例’, left: ’center’, top: 20, textStyle: {color: ’#ccc’,fontStyle: ’italic’//標(biāo)題字體 } }, //彈窗，響應(yīng)鼠標(biāo)指向，顯示具體細(xì)節(jié) tooltip : { trigger: ’item’,//以具體項(xiàng)目觸發(fā)彈窗 formatter: '{a} <br/>{b} : {c} (qcy8sy8k88%)', }, //圖例，選擇要顯示的項(xiàng)目 legend:{ orient:’vertical’, left:’left’, textStyle:{color:’#c8c8d0’ }, data:[’安心’,’安盛天平’,’中華聯(lián)合保險(xiǎn)’,’中國(guó)太平洋保險(xiǎn)’,’中國(guó)人保財(cái)險(xiǎn)’,’平安車(chē)險(xiǎn)’] //注意要和數(shù)據(jù)的name相對(duì)應(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’]}//動(dòng)態(tài)數(shù)據(jù)切換，數(shù)據(jù)顯示可以在該規(guī)定內(nèi)容中切換顯示方式， } }, /*//視覺(jué)映射組件，將數(shù)據(jù)映射到視覺(jué)元素上 visualMap: { show: false, min: 1, max: 2, dimension: 0, //選取數(shù)據(jù)的維度，如人數(shù)據(jù)：[身高，體重]，則1代表將體重進(jìn)行映射，默認(rèn)值為數(shù)組的最后一位 // seriesIndex: 4, //選取數(shù)據(jù)集合中的哪個(gè)數(shù)組，如{一班}，{二班}，默認(rèn)選取data中的所有數(shù)據(jù)集 inRange: {//選定了要映射的對(duì)象，用inRange詳細(xì)寫(xiě)要渲染的具體細(xì)節(jié)，[x，y]中x指最小值對(duì)應(yīng)的量（亮度，飽和度等），y指最大值對(duì)應(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, //從塊到文字的第一段長(zhǎng) length2: 20 //拐彎到文字的段長(zhǎng) }},itemStyle: { //圖例樣式 normal: { //color: ’#97413c’, shadowBlur: 50,//陰影模糊程度 shadowColor: ’rgba(0, 0, 0, 0.5)’,//陰影顏色，一般黑 }},animationType: ’scale’, //初始動(dòng)畫(huà)效果，scale是縮放，expansion是展開(kāi)animationEasing: ’elasticOut’, //初始動(dòng)畫(huà)緩動(dòng)效果animationDelay: function (idx) { //數(shù)據(jù)更新動(dòng)畫(huà)時(shí)長(zhǎng)，idx限定了每個(gè)數(shù)據(jù)塊從無(wú)到有的速度 return Math.random() * 200;} } ], color: [’#97858c’,’pink’,’green’,’yellow’,’orange’,’#97813c’], },

接下來(lái)看init代碼

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

然后是給動(dòng)態(tài)數(shù)據(jù)賦值代碼（從后臺(tái)接口取得的數(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(’連接失敗，請(qǐng)檢查網(wǎng)絡(luò)！’); }); },

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

頁(yè)面完全沒(méi)有效果：

在加上下面代碼后：

//數(shù)據(jù)自動(dòng)刷新，必然需要一個(gè)監(jiān)聽(tīng)機(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 //對(duì)象內(nèi)部屬性的監(jiān)聽(tīng)，關(guān)鍵。 } },

我們?cè)倏纯催\(yùn)行結(jié)果：

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

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