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

Ext.define('saas.view.home.charts.SaleTrend', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'sale-trend',

    id: 'sale_trend',

    title: '近六月销售趋势图（万元）',
    bodyPadding: '16 0 16 0',

    initComponent: function () {
        var me = this;

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

        me.callParent(arguments);
    },

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

        store.each(function (d) {
            var d = d.data;
            fields.push(d.x + '月');
            sale.push(d.sale);
            saleBack.push(d.saleback);
        });

        data = data.concat([{
            name: '销售额',
            type: 'line',
            data: sale,
            symbolSize: 1,
            areaStyle: {
                color: '#EDF6FC',
            }
        }, {
            name: '销售回款',
            type: 'line',
            data: saleBack,
            symbolSize: 1,
            areaStyle: {
                color: '#FBEDEF',
            }
        }]);
        return {
            color: [
                '#64B0E4',
                '#FF1038'
            ],
            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 = saas.util.BaseUtil.numberFormat(value, 4, true);

                        series.push(marker + seriesName + ': ' + value);
                    }

                    return name + ': ' + '<br/>' + series.join('<br/>');
                }
            },
            legend: {
                left: 0,
                data: ['销售额', '销售回款'],
                icon: 'rect',
                itemWidth: 10,
                itemHeight: 2
            },
            grid: {
                left: 0,
                right: 16,
                bottom: 5,
                top: 40,
                borderColor: '#E5EAEF',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: fields,
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                axisLabel: {
                    color: '#485465'
                },
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#E5EAEF']
                    }
                },
                axisLabel: {
                    color: '#485465'
                }
            },
            series: data
        }
    }
});