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

Ext.define('saas.view.home.charts.StockAmount', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'stock-amount',

    id: 'stock_amount',

    title: '近六月库存金额图（万元）',

    initComponent: function () {
        var me = this;

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

        me.callParent(arguments);
    },

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

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

        return {
            color: [
                '#34BAF6'
            ],
            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 + value);
                    }

                    return name + ': ' + '<br/>' + series.join('<br/>');
                }
            },
            grid: {
                left: 0,
                right: 0,
                bottom: 5,
                top: 10,
                borderColor: '#E5EAEF',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: fields,
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                axisLabel: {
                    color: '#485465'
                },
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#E5EAEF']
                    }
                },
                axisLabel: {
                    color: '#485465'
                }
            },
            series: [{
                type: 'bar',
                barWidth: 25,
                data: data
            }]
        }
    }

});