一、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)'
}
}
}
]
};
京公网安备 11010802030320号