百度pie显示各大学人数展示情况和总人数,当前图表运用了rich外面参数,结合了title和legend进行布局。
var echartData = [{
value: 6666,
name: ' 北京大学 '
}, {
value: 6787,
name: ' 清华大学 '
}, {
value: 3515,
name: ' 人民大学 '
}, {
value: 5797,
name: '中国电影学院'
}, {
value: 3854,
name: '人民美术学院'
}, {
value: 6531,
name: '西南政法大学'
}]
var rich = {
yellow: {
color: "#ffc72b",
fontSize: 20,
padding: [3, 4, -75, 0],
align: 'center'
},
total: {
color: "#ffc72b",
fontSize: 40,
align: 'center'
},
white: {
color: "#fff",
align: 'center',
fontSize: 16,
padding: [15, 0]
},
blue: {
color: '#49dff0',
fontSize: 16,
padding: [3, 4, -30, 0],
align: 'center'
},
hr: {
borderColor: '#0b5263',
width: '100%',
borderWidth: 1,
height: 60
}
}
option = {
backgroundColor: '#040c33',
title: {
text:'总考生数',
left:'center',
top:'53%',
padding:[24,0],
textStyle:{
color:'#fff',
fontSize:18,
align:'center'
}
},
legend: {
selectedMode:false,
formatter: function(name) {
var total = 0; //各科正确率总和
var averagePercent; //综合正确率
echartData.forEach(function(value, index, array) {
total += value.value;
});
return '{total|' + total + '}';
},
data: [echartData[0].name],
// data: ['高等教育学'],
// itemGap: 50,
left: 'center',
top: 'center',
icon: 'none',
align:'center',
textStyle: {
color: "#fff",
fontSize: 16,
rich: rich
},
},
series: [{
name: '总考生数量',
type: 'pie',
radius: ['42%', '55%'],
hoverAnimation: false,
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
label: {
normal: {
formatter: function(params, ticket, callback) {
var total = 0; //考生总数量
var percent = 0; //考生占比
echartData.forEach(function(value, index, array) {
total += value.value;
});
percent = ((params.value / total) * 100).toFixed(1);
return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
},
rich: rich
},
},
labelLine: {
normal: {
length: 55,
length2: 0,
lineStyle: {
color: '#0b5263'
}
}
},
data: echartData
}]
};