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',

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'cartesian',
                colors: [
                    '#64B0E4',
                    '#FF1038'
                ],
                captions: {
                    title: {
                        text: '销售趋势图',
                        style: {
                            'font-size': '14px',
                            'color': '#485465',
                            'letter-spacing': '-0.07px'
                        },
                        align: 'left'
                    }
                },
                bind: {
                    store: '{sale_trend}',
                },
                // legend: {
                //     type: 'dom',
                //     docked: 'top',

                // },
                axes: [{
                    type: 'category',
                    fields: ['x'],
                    position: 'bottom',
                    label: {
                        rotate: {
                            degrees: -25
                        }
                    },
                    style: {
                        fill: '#E7EBEF',
                        strokeStyle: 'transparent'
                    },
                },{
                    type: 'numeric',
                    fields: ['sale', 'saleback'],
                    position: 'left',
                    grid: {
                        even: {
                            stroke: '#E7EBEF',
                        },
                        odd: {
                            stroke: '#E7EBEF',
                        }
                    },
                    style: {
                        fill: '#fff',
                        strokeStyle: 'transparent'
                    },
                }],
                series: [{
                    type: 'line',
                    smooth: true,
                    title: '销售额',
                    xField: 'x',
                    yField: ['sale'],
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onSeriesTooltipRender
                    }
                }, {
                    type: 'line',
                    smooth: true,
                    title: '销售回款',
                    xField: 'x',
                    yField: ['saleback'],
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onSeriesTooltipRender
                    }
                }]
            }]
        });

        me.callParent(arguments);
    },

    onSeriesTooltipRender: function (tooltip, record, item) {
        var title = item.series.getTitle();
        tooltip.setHtml(record.get('x') + title + record.get(item.series.getYField()) + '万元');
    },

});