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',
                insetPadding: '28 0 0 0',
                colors: [
                    '#64B0E4',
                    '#FF1038'
                ],
                bind: {
                    captions: {
                        title: {
                            text: '近六月销售趋势图',
                            style: {
                                'font-size': '14px',
                                'color': '#485465',
                                'letter-spacing': '-0.07px'
                            },
                            align: 'left'
                        }
                    },
                    store: '{sale_trend}',
                },
                // legend: {
                //     type: 'dom',
                //     docked: 'top',

                // },
                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: ['sale', 'saleback'],
                    position: 'left',
                    grid: {
                        even: {
                            stroke: '#F7F8FA',
                        },
                        odd: {
                            stroke: '#F7F8FA',
                        }
                    },
                    label: {
                        fillStyle: '#485465',
                    },
                    style: {
                        fill: '#fff',
                        strokeStyle: 'transparent'
                    },
                }],
                series: [{
                    type: 'line',
                    smooth: true,
                    title: '销售额',
                    xField: 'x',
                    yField: 'sale',
                    label: {
                        field: 'sale',
                        display: 'over',
                        fontSize: '12px',
                        strokeStyle: '#A3D0EE',
                    },
                    marker: {
                        radius: 0,
                        lineWidth: 0
                    },
                    highlight: {
                        fillStyle: '#53A8E2',
                        fillOpacity: 1,
                        strokeStyle: '#A3D0EE',
                        radius: 5,
                        lineWidth: 2,
                    },
                    style: {
                        lineWidth: 2,
                        fillStyle: '#53A8E2',
                        fillOpacity: 0.1,
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onSeriesTooltipRender
                    },
                    // renderer: me.onSeriesRenderer
                }, {
                    type: 'line',
                    smooth: true,
                    title: '销售回款',
                    xField: 'x',
                    yField: 'saleback',
                    label: {
                        field: 'saleback',
                        display: 'over',
                        fontSize: '12px',
                        strokeStyle: '#D54F65',
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onSeriesTooltipRender
                    },
                    marker: {
                        radius: 0,
                        lineWidth: 0
                    },
                    highlight: {
                        fillStyle: '#D54F65',
                        fillOpacity: 1,
                        strokeStyle: '#FF9BAC',
                        radius: 5,
                        lineWidth: 2,
                    },
                    style: {
                        lineWidth: 2,
                        fillStyle: '#D54F65',
                        fillOpacity: 0.1,
                    },
                }],
                listeners: {
                    itemhighlightchange: me.itemhighlightchange
                }
            }]
        });

        me.callParent(arguments);
    },

    onSeriesRender: function (sprite, config, rendererData, index) {
        var store = rendererData.store,
            storeItems = store.getData().items,
            currentRecord = storeItems[index],
            previousRecord = (index > 0 ? storeItems[index-1] : currentRecord),
            current = currentRecord && currentRecord.data['g1'],
            previous = previousRecord && previousRecord.data['g1'],
            isUp = current >= previous,
            changes = {};

        switch (config.type) {
            case 'marker':
                changes.strokeStyle = (isUp ? 'cornflowerblue' : 'tomato');
                changes.fillStyle = (isUp ? 'aliceblue' : 'lightpink');
                break;
            case 'line':
                changes.strokeStyle = (isUp ? 'cornflowerblue' : 'tomato');
                changes.fillStyle = (isUp ? 'rgba(100, 149, 237, 0.4)' : 'rgba(255, 99, 71, 0.4)');
                break;
        }

        return changes;
    },

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

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

    itemhighlightchange: function(chart, newHighlightItem, oldHighlightItem) {
        this.setSeriesLineWidth(newHighlightItem, 4);
        this.setSeriesLineWidth(oldHighlightItem, 2);
    },

    setSeriesLineWidth: function (item, lineWidth) {
        console.log('xxxx');
        if (item) {
            item.series.setStyle({
                lineWidth: lineWidth
            });
        }
    },

});