smartschool-platform/frontend/pc-web/app/view/home/charts/StudentGender.js

Ext.define('school.view.home.charts.StudentGender', {
    extend: 'school.view.core.chart.ChartBase',
    xtype: 'studentgender',

    id: 'studentgender',

    title: '在校男女学生比例', // 设置默认标题占好默认高度，使容器内的组件可以正确获得展示高度

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'echartsbase',
                bind: {
                    store: '{studentgender}',
                },
                isEmpty: me.isEmpty,
                createOption: me.createOption
            }]
        });

        me.callParent(arguments);
    },

    isEmpty: function (store) {
        var index = store.findBy(function (s) {
            return s.get('y') > 0;
        });

        var flag = index == -1;

        return flag;
    },

    createOption: function (store) {
        var fields = [],
            data = [];

        store.each(function (d) {
            var d = d.data;
            if (d.y > 0) {
                fields.push(d.x);
                data.push({
                    value: d.y,
                    name: d.x
                });
            }
        });

        return {
            color: [
                '#77EAF7',
                '#FD9C8D',
            ],
            tooltip: {
                trigger: 'item',
                formatter: function (params, ticket, callback) {
                    var name = params.name,
                        value = params.value,
                        marker = params.marker,
                        percent = params.percent;

                    if (name.length > 7) {
                        name = Ext.String.insert(name, '<br/>', 7)
                    }
                    value = school.util.BaseUtil.numberFormat(value, 4, true);

                    return name + '<br/>' + marker + value + '  (' + percent + '%)';
                }
            },
            legend: {
                orient: 'vertical',
                // left: '70%',
                // width: '30%',
                // icon: 'circle',
                right: '10%',
                data: fields,
                // itemWidth: 9,
                // itemHeight: 9,
                formatter: function (name) {
                    var cWidth = Ext.getCmp('studentgender').items.items[0].echarts.getWidth() * 0.3,
                        dataCount = fields.length,
                        maxLength = Math.ceil((cWidth / dataCount) / 20);
                    return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
                },
            },
            series: [{
                type: 'pie',
                // radius: ['48%', '88%'],
                // center: ['35%', '50%'],
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}: {c}'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: data
            }]
        }
    }
});