1、業(yè)務(wù)需求

將數(shù)據(jù)顯示在餅圖內(nèi)部，格式化百分比顯示，鼠標(biāo)放上去顯示具體名稱和數(shù)值

原樣式如下

2、業(yè)務(wù)實(shí)現(xiàn)

調(diào)整代碼如下，核心語(yǔ)句已標(biāo)記注釋

option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{value: 1048,name: 'Search Engine'},{value: 735,name: 'Direct'},{value: 580,name: 'Email'},{value: 484,name: 'Union Ads'},{value: 300,name: 'Video Ads'}],radius: '50%',center: ['50%', '50%'], // 這個(gè)屬性可以調(diào)整圖像的位置，左面所示為中心label: {normal: {show: true,position: 'inner', // 數(shù)值顯示在內(nèi)部formatter: 'ozvdkddzhkzd%', // 格式化數(shù)值百分比輸出},},emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}] };

更改后效果如下圖所示

?

?3）附錄

ECharts 提示框組件Tooltip屬性大全（包含文本注釋）

?

?以上就是ECharts 餅圖數(shù)據(jù)放在餅圖內(nèi)部顯示的介紹，做此記錄，如有幫助，歡迎點(diǎn)贊關(guān)注收藏！?

總結(jié)

以上是生活随笔為你收集整理的ECharts 饼图数据放在饼图内部显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。