解決vue頁面渲染但dom沒渲染的操作
我就廢話不多說了,大家還是直接看代碼吧~
this.$nextTick(() => { $("select[name='ddlCostCenter']").select2({ language: "zh-CN" }); });
補(bǔ)充知識(shí):vue+Echarts動(dòng)態(tài)數(shù)據(jù)已經(jīng)賦值,但是無法渲染頁面的問題
最近用vue+Echarts想做一個(gè)餅狀統(tǒng)計(jì)圖,但是數(shù)據(jù)明明已經(jīng)綁定完畢,但是頁面渲染一直沒有效果,最終才發(fā)現(xiàn)問題所在,自己還是個(gè)新手,主要對(duì)vue還不是很熟悉。廢話不說,接下來看我的代碼:
正常的給個(gè)div的大小
<div> <div id="echartss" :style="{width: '100%', height: '600px'}"></div> </div>
接下來是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/> : {c} (vvxyksv9kd%)", }, //圖例,選擇要顯示的項(xiàng)目 legend:{ orient:'vertical', left:'left', textStyle:{ color:'#c8c8d0' }, data:['安心','安盛天平','中華聯(lián)合保險(xiǎn)','中國(guó)太平洋保險(xiǎn)','中國(guó)人保財(cái)險(xiǎn)','平安車險(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)容中切換顯示方式, } }, /*//視覺映射組件,將數(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ù)集合中的哪個(gè)數(shù)組,如{一班},{二班},默認(rèn)選取data中的所有數(shù)據(jù)集 inRange: { //選定了要映射的對(duì)象,用inRange詳細(xì)寫要渲染的具體細(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)畫效果,scale是縮放,expansion是展開 animationEasing: 'elasticOut', //初始動(dòng)畫緩動(dòng)效果 animationDelay: function (idx) { //數(shù)據(jù)更新動(dòng)畫時(shí)長(zhǎng),idx限定了每個(gè)數(shù)據(jù)塊從無到有的速度 return Math.random() * 200; } } ], color: ['#97858c','pink','green','yellow','orange','#97813c'], },
接下來看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ò)!'); }); },
到目前為止,頁面的結(jié)果是:
頁面完全沒有效果:
在加上下面代碼后:
//數(shù)據(jù)自動(dòng)刷新,必然需要一個(gè)監(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 //對(duì)象內(nèi)部屬性的監(jiān)聽,關(guān)鍵。 } },
我們?cè)倏纯催\(yùn)行結(jié)果:
數(shù)據(jù)雖然刷新了,但是我們的Echart's組件卻不知道,必須有個(gè)watch過程。
以上這篇解決vue頁面渲染但dom沒渲染的操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE3刷新頁面報(bào)錯(cuò)問題解決:Uncaught?SyntaxError:Unexpected?token?&apo
這篇文章主要介紹了VUE3刷新頁面報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?‘<‘,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑
這篇文章主要介紹了淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vue使用三方工具vueUse實(shí)現(xiàn)虛擬列表
其實(shí)采用vueUse中的useVirtualList方法同樣可以實(shí)現(xiàn)虛擬列表,這篇文章小編就來和大家詳細(xì)介紹一下如何使用vueUse實(shí)現(xiàn)簡(jiǎn)單的虛擬列表效果吧2024-04-04關(guān)于怎么在vue項(xiàng)目里寫react詳情
本篇文章是在vue項(xiàng)目里寫tsx的一篇介紹。其實(shí)vue里面寫jsx也挺有意思的,接下來小編九給大家詳細(xì)介紹吧,感興趣的小伙伴請(qǐng)參考下面的文章內(nèi)容2021-09-09