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