1、業務需求

將數據顯示在餅圖內部，格式化百分比顯示，鼠標放上去顯示具體名稱和數值

原樣式如下

2、業務實現

調整代碼如下，核心語句已標記注釋

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%'], // 這個屬性可以調整圖像的位置，左面所示為中心label: {normal: {show: true,position: 'inner', // 數值顯示在內部formatter: 'ozvdkddzhkzd%', // 格式化數值百分比輸出},},emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}] };

更改后效果如下圖所示

?

?3）附錄

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

?

?以上就是ECharts 餅圖數據放在餅圖內部顯示的介紹，做此記錄，如有幫助，歡迎點贊關注收藏！?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。