1.实际效果如图:
2.关键js代码:
option = {
title: {
text: "性别数据",
},
color: ['#66ADE1', '#41C8DB', '#BD52C6', '#E8C83F', '#F28743'],//颜色自定义,不设置时默认取echarts的默认颜色顺序
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: '男士',
type: 'pie',
radius: ['20%', '30%'],
center: ['25%', '50%'],
data: [{
"name": "初中",
"value": 111
},
{
"name": "高中",
"value": 222
},
{
"name": "本科",
"value": 333
},
{
"name": "硕士",
"value": 85
},
{
"name": "博士",
"value": 39
},
{
label: {
normal: {
formatter: ['{c| }', '{b|男士}', ].join('\n'),
position: 'center',
//让文字居中
show: true,
rich: {
b: {
fontWeight: 'bold',
color: '#333333',
lineHeight: '26'
}
},
}
}
}],
itemStyle: {
normal: {
label: {
formatter: function(p) {
return p.name + " \n " + p.percent + "%";
},
color: '#000'
},
labelLine: {
show: true
}
}
}
},
{
name: '女士',
type: 'pie',
radius: ['20%', '30%'],
center: ['70%', '50%'],
itemStyle: {
normal: {
label: {
formatter: function(p) {
return p.name + " \n " + p.percent + "%";
},
color: '#000'
},
labelLine: {
show: true
}
}
},
data: [{
"name": "初中",
"value": 123
},
{
"name": "高中",
"value": 203
},
{
"name": "本科",
"value": 201
},
{
"name": "硕士",
"value": 72
},
{
"name": "博士",
"value": 24
},
{
label: {
normal: {
formatter: ['{c| }', '{b|女士}', ].join('\n'),
position: 'center',
//让文字居中
show: true,
rich: {
b: {
fontWeight: 'bold',
color: '#333333',
lineHeight: '26'
}
},
}
}
}],
}],
noDataLoadingOption: {
text: '暂无数据',
textStyle: {
fontSize: '20',
},
effect: 'bubble',
effectOption: {
effect: {
n: 0
}
}
},
};