百度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 }] };