smartschool-platform/frontend/pc-web/app/view/analysis/attence/Chart2.js

Ext.define('school.view.analysis.attence.Chart2', {
    extend: 'school.view.core.chart.ChartBase',
    xtype: 'attence-chart2',

    title: '初三年级今日迟到人数',

    initComponent: function () {
        var me = this;

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

        me.callParent(arguments);
    },

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

        store.each(function (d) {
            var d = d.data;
            fields.push(d.class);
            data.push(d.count);
        });
        return {
            color: [
                '#34BAF6'
            ],
            grid: {
                left: 0,
                right: 0,
                top: 40,
                bottom: 5,
                borderColor: '#E5EAEF',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var name = '',
                    series = [];

                    for(var x = 0; x < params.length; x++) {
                        var p = params[x],
                        marker = p.marker,
                        seriesName = p.seriesName,
                        name = p.name,
                        value = p.value;

                        value = school.util.BaseUtil.numberFormat(value, 4, true);

                        series.push(marker + value);
                    }

                    if(name.length > 9) {
                        name = Ext.String.insert(name, '<br/>', 7)
                    }
        

                    return name + ': ' + '<br/>' + series.join('<br/>');
                }
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                axisLabel: {
                    color: '#485465',
                    interval: 0
                },
                data: fields,
            },
            yAxis: {
                type: 'value',
                interval: 1,
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#E5EAEF']
                    }
                },
                axisLabel: {
                    color: '#485465'
                }
            },
            series: [{
                type: 'bar',
                barWidth: 25,
                data: data,
                label: {
                    normal: {
                        show: true,
                        position: 'outside'
                    }
                },
            }]
        };
    }
});