您好,登錄后才能下訂單哦!
小編給大家分享一下vue如何實(shí)現(xiàn)echart餅圖legend顯示百分比,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
效果圖
實(shí)現(xiàn)源碼
option = { title : { text: '某站點(diǎn)用戶訪問(wèn)來(lái)源', subtext: '純屬虛構(gòu)', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/> : {c} (a1fw2v1%)" }, legend: { orient: 'vertical', // 布局方式,默認(rèn)為水平布局,可選為:'horizontal' ¦ 'vertical' // 水平安放位置,默認(rèn)為左側(cè),可選為:'center' | 'left' | 'right' | {number}(x坐標(biāo),單位px) x: 'left', // 垂直安放位置,默認(rèn)為全圖頂端,可選為:'top' | 'bottom' | 'center' | {number}(y坐標(biāo),單位px) y: 'bottom', // 重寫legend顯示樣式 formatter: function(name) { // 獲取legend顯示內(nèi)容 let data = option.series[0].data; let total = 0; let tarValue = 0; for (let i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { tarValue = data[i].value; } } let p = (tarValue / total * 100).toFixed(2); return name + ' ' + ' ' + p + '%'; }, data: ['直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜索引擎'] }, series : [ { name: '訪問(wèn)來(lái)源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接訪問(wèn)'}, {value:310, name:'郵件營(yíng)銷'}, {value:234, name:'聯(lián)盟廣告'}, {value:135, name:'視頻廣告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };
看完了這篇文章,相信你對(duì)“vue如何實(shí)現(xiàn)echart餅圖legend顯示百分比”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。