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

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

    id: 'purchase_trend',

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'cartesian',
                insetPadding: '28 0 0 0',
                colors: [
                    '#34BAF6'
                ],
                bind: {
                    captions: {
                        title: {
                            text: '近六月采购趋势图',
                            style: {
                                'font-size': '14px',
                                'color': '#485465',
                                'letter-spacing': '-0.07px'
                            },
                            align: 'left'
                        }
                    },
                    store: '{purchase_trend}',
                },
                axes: [{
                    // title: {
                    //     text: '月',
                    //     fontSize: 14,
                    // },
                    type: 'category',
                    fields: ['x'],
                    position: 'bottom',
                    label: {
                        fillStyle: '#485465'
                    },
                    style: {
                        fill: '#F7F8FA',
                        strokeStyle: 'transparent'
                    },
                    renderer: me.categoryRender
                },{
                    type: 'numeric',
                    fields: ['y'],
                    position: 'left',
                    grid: {
                        even: {
                            stroke: '#F7F8FA'
                        },
                        odd: {
                            stroke: '#F7F8FA',
                        }
                    },
                    label: {
                        fillStyle: '#485465'
                    },
                    style: {
                        fill: '#fff',
                        strokeStyle: 'transparent'
                    },
                }],
                series: [{
                    type: 'bar',
                    xField: 'x',
                    yField: ['y'],
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onBarTipRender
                    },
                    // label: {
                    //     field: 'y',
                    //     display: 'insideEnd',
                    //     fontSize: '12px',
                    //     strokeStyle: '#fff',
                    // },
                    style: {
                        lineWidth: 0,
                        strokeStyle: 'transparent',
                        maxBarWidth: 50,
                    },
                }]
            }]
        });

        me.callParent(arguments);
    },

    onBarTipRender: function (tooltip, record, item) {
        tooltip.setHtml(record.get('x') + '月: ' + record.get('y') + '万元');
    },

    categoryRender: function(axis, label, layoutContext, lastLabel) {
        return label + '月';
    }

});