saas-platform/frontend/saas-web/app/view/home/charts/MonthIO.js

Ext.define('saas.view.home.charts.MonthIO', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'month-io',
    id: 'month_io',

    title: '本月收入支出额（万元）',

    initComponent: function () {
        var me = this;

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

        me.callParent(arguments);
    },

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

        store.each(function (d) {
            var d = d.data;
            // fields.push(d.x);
            main.push(d.main);
            other.push(d.other);
        });

        var o = {
            color: [
                '#2C82BE',
                '#82CCFF'
            ],
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var name = '',
                    total = 0,
                    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;

                        total += value;

                        value = saas.util.BaseUtil.numberFormat(value, 4, true);
                        
                        series.push(marker + seriesName + ': ' + value);
                    }

                    total = saas.util.BaseUtil.numberFormat(total, 4, true);
                    
                    return name + ': ' + total + '<br/>' + series.join('<br/>');
                }
            },
            legend: {
                orient: 'horizontal',
                left: 0,
                icon: 'circle',
                data: ['主营业务', '其他业务'],
                itemWidth: 9,
                itemHeight: 9
            },
            grid: {
                left: 0,
                right: 0,
                bottom: 5,
                top: 40,
                borderColor: '#E5EAEF',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['收入', '支出'],
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                axisLabel: {
                    color: '#485465'
                },
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#E5EAEF']
                    }
                },
                axisLabel: {
                    color: '#485465'
                }
            }],
            series: [{
                name: '主营业务',
                type: 'bar',
                stack: '合计',
                barWidth: 25,
                data: main
            },
            {
                name: '其他业务',
                type: 'bar',
                stack: '合计',
                barWidth: 25,
                data: other
            }]
        };
        return o;
    }
});