1. 首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. ECharts官网
  6. Gallery

百度pie显示各大学人数展示情况和总人数

2021年02月01日 11:44:02

百度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
    }]
};
点击展开全文
百度pie显示各大学人数展示情况和总人数