Echarts實現餅圖+餅圖中心文字顯示

• 描述
• 效果
• 源代碼

描述

Echarts實現餅圖+中心文字顯示.
在 title 內實現餅圖中心文字展示.

效果

源代碼

let data = [{ name: '機房001', value: 1501 },{ name: '機房002', value: 1305 },{ name: '機房003', value: 1014 },{ name: '機房004', value: 1330 },{ name: '機房005', value: 2055 },{ name: '機房006', value: 1224 }, ]; let totalCount = data.reduce((vs, v) => vs + v.value, 0); let formatNumber = (num) => num.toString().replace(/(?=(\B)(\d{3})+$)/g, ','); option = {title: [{text: `{name|主機總數/臺}\n{val|${formatNumber(totalCount)}}`,top: 'center',left: 'center',textStyle: {rich: {name: {fontSize: 14,color: '#666666',padding: [10, 0]},val: {fontSize: 32,fontWeight: 'bold',color: '#333333'}}}},{text: '主機分布',top: 20,left: 'center',textStyle: { fontSize: 14, color: '#666666', fontWeight: 400 }}],tooltip: {trigger: 'item',backgroundColor: 'rgba(0,0,0,0.9)',formatter: (params) => `${params.data.name}<br/>${params.marker}<span style="color:${params.color}">主機占比: ${params.percent} %</span><br/>${params.marker}<span style="color:${params.color}">主機數量: ${params.value} 臺</span>`},series: {type: 'pie',radius: [50, 100],left: 'center',top: 'center',width: 400,itemStyle: { borderColor: '#fff', borderWidth: 1 },label: {alignTo: 'edge',formatter: '{name|{b}}\n{value|ozvdkddzhkzd% - {c}臺}',minMargin: 5,edgeDistance: 10,lineHeight: 15,rich: { value: { fontSize: 10, color: '#999999' } }},labelLine: {length: 15,length2: 0,maxSurfaceAngle: 80},labelLayout: (params) => {const isLeft = params.labelRect.x < myChart.getWidth() / 2;const points = params.labelLinePoints;points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;return params;},data: data} };

總結

以上是生活随笔為你收集整理的Echarts实现饼图+饼图中心文字显示的全部內容，希望文章能夠幫你解決所遇到的問題。

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