一、echarts餅圖百分比實現原理
echarts餅圖的實現原理是將數據按比例分為多個扇形，根據扇形所佔比例在圓心處標出百分比數值，同時在圖例中標出具體數值及對應顏色信息，讓用戶直觀地了解數據分佈情況。
option = {
tooltip: {
formatter: "{b} : {c} ({d}%)"
},
legend: {
data:['數據1','數據2','數據3']
},
series : [
{
name: '數據分佈',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:500, name:'數據1'},
{value:300, name:'數據2'},
{value:200, name:'數據3'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
二、echarts餅圖
echarts餅圖是一種常用的數據可視化圖表，可以直觀地展現數據的比例關係。
在echarts餅圖中，每個扇形代表一種數據，扇形所佔角度越大表示該數據所佔比例越大。通過不同的顏色區分不同的數據，使得數據變得更加容易理解。
三、echarts餅圖百分比自定義
用戶可以通過echarts的API自定義餅圖百分比的樣式、顏色、標籤等信息，以滿足個性化需求。
下面是一個自定義echarts餅圖的例子：
option = {
tooltip: {
formatter: "{b} : {c} ({d}%)"
},
legend: {
data:['數據1','數據2','數據3']
},
series : [
{
name: '數據分佈',
type: 'pie',
radius : ['40%', '55%'],
center: ['50%', '60%'],
roseType: 'radius',
label: {
formatter: '{b|{b}：}{c} {per|{d}%} ',
rich: {
b: {
fontSize: 12,
lineHeight: 20
},
per: {
fontSize: 12,
lineHeight: 20
}
}
},
data:[
{value:500, name:'數據1'},
{value:300, name:'數據2'},
{value:200, name:'數據3'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
四、echarts餅圖百分比為0不顯示
在某些情況下，數據可能出現0值的情況，為了避免顯示的數據有誤，用戶可以將0值對應的扇形隱藏掉。
option = {
series: [{
type: 'pie',
data: [
{value:0, name:'數據1', itemStyle:{normal:{opacity:0}}},
{value:300, name:'數據2'},
{value:200, name:'數據3'}
]
}]
};
五、echarts餅圖間隙
為了使餅圖更加美觀，用戶可以通過設置餅圖間隙來控制扇形之間的距離。
option = {
series : [
{
type:'pie',
radius : ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
data:[
{value:335, name:'數據1'},
{value:310, name:'數據2'},
{value:234, name:'數據3'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
roseType: 'angle',
//餅圖間隙
//每個扇形之前的間隙大小
//為百分比值，數值在0~1之間
//若該值為0，則組成的就是環形圖了
//默認值為0
labelLine: {
normal: {
length: 1,
length2: 25,
smooth: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
silent: false
}
]
};
六、echarts餅圖圖例間距
用戶可以通過設置echarts餅圖圖例的間距來調整圖例的位置，使得圖例更加美觀。
option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
//圖例之間的距離
itemGap: 20,
data:['數據1','數據2','數據3']
},
series : [
{
name: '數據分佈',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:500, name:'數據1'},
{value:300, name:'數據2'},
{value:200, name:'數據3'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
七、echarts餅圖圖例設置
用戶可以通過設置echarts餅圖的圖例信息，例如位置、字體大小、字體顏色等，來控制圖例的外觀效果。
option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
textStyle: {
color: '#fff',
fontSize: 14
},
data:['數據1','數據2','數據3']
},
series : [
{
name: '數據分佈',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:500, name:'數據1'},
{value:300, name:'數據2'},
{value:200, name:'數據3'}
],
itemStyle: {
emphasis: {
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
}
]
};
八、echarts圖例加百分號
用戶可以通過自定義echarts圖例文字內容的方式在圖例上加上百分號，提高數據表現力。
option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
data:['數據1','數據2','數據3'].map(function(item){
return item + ' 100%';
})
},
series : [
{
name: '數據分佈',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:500, name:'數據1'},
{value:300, name:'數據2'},
{value:200, name:'數據3'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/153931.html
微信掃一掃 
支付寶掃一掃 