首页图表展示改用ECharts

frontend/saas-web/app.json

@@ -212,6 +212,9 @@
         {
             "path": "${framework.dir}/build/ext-all-rtl-debug.js"
         },
+        {
+            "path": "lib/echarts.common.min.js"
+        },
         {
             "path": "app.js",
             "bundle": true

frontend/saas-web/app/util/BaseUtil.js

@@ -174,5 +174,23 @@ Ext.define('saas.util.BaseUtil', {
                 });
             })
         },
+
+        /**
+         * 格式化数字
+         * @param value: 需要格式化的数字
+         * @param decimalPrecision: 最大小数位数
+         * @param thousandSeparator: 显示千分位分隔符
+         */
+        numberFormat: function(value, decimalPrecision, thousandSeparator) {
+            value = Number(value) || 0;
+            decimalPrecision = Ext.isNumber(decimalPrecision) ? decimalPrecision : 2;
+            thousandSeparator = !!thousandSeparator;
+            
+            var f1 = thousandSeparator ? '0,000' : '0';
+            var arr = (value + '.').split('.');
+            var xr = (new Array(arr[1].length > decimalPrecision ? decimalPrecision : arr[1].length)).fill('0');
+            var format = f1 + '.' + xr.join('');
+            return Ext.util.Format.number(value, format);
+        }
     }
 });

frontend/saas-web/app/view/core/chart/EChartsBase.js

@@ -0,0 +1,181 @@
+Ext.define('saas.view.core.EChartsBase', {
+    extend: 'Ext.Container',
+    xtype: 'echartsbase',
+
+    mixins: [
+        'Ext.util.StoreHolder'
+    ],
+
+    border: false,
+    style: {
+        width: '100%',
+        height: '100%'
+    },
+    config: {
+        option: null
+    },
+
+    initComponent: function () {
+        var me = this;
+        me.on('resize', function(container, width, height, oldWidth, oldHeight, eOpts) {
+            if(me.timer) {
+                window.clearTimeout(me.timer);
+            }
+            me.timer = window.setTimeout(function() {
+                me.echarts.resize();
+            }, 100);
+        });
+        me.on("boxready", function () {
+            me.echarts = echarts.init(me.getEl().dom);
+        });
+        me.callParent();
+    },
+
+    setStore: function (newStore) {
+        var me = this;
+ 
+        if (me.store !== newStore) {
+            if (me.isConfiguring) {
+                me.store = newStore;
+            } else {
+                me.bindStore(newStore, false);
+            }
+        }
+    },
+
+    onBindStore: function(store, oldStore) {
+        var me = this;
+ 
+        if (me.store.isBufferedStore) {
+            me.store.preserveScrollOnReload = me.preserveScrollOnReload;
+        }
+        if (oldStore && oldStore.isBufferedStore) {
+            delete oldStore.preserveScrollOnReload;
+        }
+ 
+        if (!me.dataSource) {
+            me.dataSource = store;
+        }
+    },
+
+    onUnbindStore: function(store) {
+        if (this.dataSource === store) {
+            this.dataSource = null;
+        }
+    },
+
+    bindStore: function (store, initial) {
+        var me = this;
+        
+        me.mixins.storeholder.bindStore.apply(me, arguments);
+ 
+ 
+        if (store && me.componentLayoutCounter && !me.blockRefresh) {
+            me.doFirstRefresh(store, !initial);
+        }
+    },
+
+    doFirstRefresh: function(store, noDefer) {
+        var me = this;
+ 
+        if (me.deferInitialRefresh && !noDefer) {
+            Ext.defer(me.doFirstRefresh, 1, me, [store, true]);
+        }
+ 
+        else {
+            if (store && !me.deferRefreshForLoad(store)) {
+                me.refresh();
+            }
+        }
+    },
+
+    deferRefreshForLoad: function(store) {
+        return store.isLoading();
+    },
+
+    getStoreListeners: function() {
+        var me = this;
+        return {
+            scope: me,
+            refresh: me.onDataRefresh,
+            replace: me.onReplace,
+            add: me.onAdd,
+            remove: me.onRemove,
+            update: me.onUpdate,
+            clear: me.onDataRefresh,
+            beginupdate: me.onBeginUpdate,
+            endupdate: me.onEndUpdate
+        };
+    },
+
+    onDataRefresh: function(store) {
+        // console.log('onDataRefresh');
+        var me = this,
+            preserveScrollOnRefresh = me.preserveScrollOnRefresh;
+ 
+        if (store.loadCount > (me.lastRefreshLoadCount || 0)) {
+            me.preserveScrollOnRefresh = me.preserveScrollOnReload;
+        }
+        me.refreshView();
+        me.preserveScrollOnRefresh = preserveScrollOnRefresh;
+        me.lastRefreshLoadCount = store.loadCount;
+    },
+
+    onReplace: function() {
+        // console.log('onReplace');
+    },
+
+    onAdd: function() {
+        // console.log('onAdd');
+    },
+
+    onRemove: function() {
+        // console.log('onRemove');
+    },
+
+    onUpdate: function() {
+        // console.log('onUpdate');
+    },
+
+    onBeginUpdate: function() {
+        // console.log('onBeginUpdate');
+    },
+
+    onEndUpdate: function() {
+        // console.log('onEndUpdate');
+    },
+
+    refreshView: function(startIndex) {
+        var me = this,
+            // If we have an ancestor in a non-boxready state (collapsed or about to collapse, or hidden), then block the 
+            // refresh because the next layout will trigger the refresh 
+            blocked = me.blockRefresh || !me.rendered || me.up('[collapsed],[isCollapsingOrExpanding=1],[hidden]'),
+            bufferedRenderer = me.bufferedRenderer;
+ 
+        // If we are blocked in any way due to either a setting, or hidden or collapsed, or animating ancestor, then 
+        // the next refresh attempt at the upcoming layout must not defer. 
+        if (blocked) {
+            me.refreshNeeded = true;
+        } else {
+            if (bufferedRenderer) {
+                bufferedRenderer.refreshView(startIndex);
+            } else {
+                me.refresh();
+            }
+        }
+    },
+
+    refresh: function() {
+        var me = this,
+        store = me.store,
+        option = me.createOption(store);
+
+        if(option) {
+            me.echarts.setOption(option);
+        }
+    },
+
+    createOption: function(store) {
+        return null;
+    }
+});

frontend/saas-web/app/view/core/tab/Controller.js

@@ -3,19 +3,23 @@ Ext.define('saas.view.core.tab.Controller', {
     alias: 'controller.core-tab-controller',
 
     init: function() {
-        var me = this,
-        tab = me.getView(),
-        viewType = tab.viewType,
-        _config = tab.index,
-        viewConfig = tab.viewConfig;
-
-        var view = {
-            _config : viewConfig,
-            xtype: viewType
-        };
-        Ext.apply(view, viewConfig);
-
-        tab.add(view);
+        try {
+            var me = this,
+            tab = me.getView(),
+            viewType = tab.viewType,
+            _config = tab.index,
+            viewConfig = tab.viewConfig;
+    
+            var view = {
+                _config : viewConfig,
+                xtype: viewType
+            };
+            Ext.apply(view, viewConfig);
+    
+            tab.add(view);
+        }catch(e) {
+            console.error(e);
+        }
     },
 
     onTabActivate: function(component) {

frontend/saas-web/app/view/home/HomeModel.js

@@ -4,12 +4,6 @@ Ext.define('saas.view.home.HomeModel', {
 
     data: {
         month_sale_amount: '0', // 本月销售合计
-        month_purchase_amount: '0', // 本月采购合计
-        month_in: '0', // 本月收入合计
-        month_out: '0', // 本月支出合计
-
-        insetPadding: '12 0 0 0', // 图表insetPadding
-        maxBarWidth: 25, // 最大柱宽
     },
 
     stores: {
@@ -97,42 +91,6 @@ Ext.define('saas.view.home.HomeModel', {
             }
         },
 
-        // month_purchase: {
-        //     model: 'saas.model.chart.DataXY',
-        //     autoLoad: true,
-        //     proxy: {
-        //         type: 'ajax',
-        //         // url: 'http://192.168.253.58:8920/homePage/purchaseData?sixMonths=false',
-        //         url: '/api/commons/homePage/purchaseData?sixMonths=false',
-        //         timeout: 8000,
-        //         actionMethods: {
-        //             read: 'GET'
-        //         },
-        //         reader: {
-        //             type: 'json',
-        //             rootProperty: 'data',
-        //         },
-        //         listeners: {
-        //             exception: function(proxy, response, operation, eOpts) {
-        //                 var p = Ext.getCmp('month_purchase');
-        //                 p && p.setLoading(false);
-        //             }
-        //         }
-        //     },
-        //     listeners: {
-        //         beforeload: function() {
-        //             var p = Ext.getCmp('month_purchase');
-        //                 p && p.setLoading(true);
-        //         },
-        //         load: function(s, d) {
-        //             var p = Ext.getCmp('month_purchase');
-        //                 p && p.setLoading(false);
-        //             var sum = Ext.util.Format.number(s.sum('y'), '0.00') || 0;
-        //             Ext.getCmp('home').getViewModel().set('month_purchase_amount', sum+'')
-        //         }
-        //     }
-        // },
-
         month_io: {
             fields: ['x', 'main', 'other'],
             autoLoad: true,
@@ -163,14 +121,6 @@ Ext.define('saas.view.home.HomeModel', {
                 load: function(s, d) {
                     var p = Ext.getCmp('month_io');
                     p && p.setLoading(false);
-                    s.each(function(r) {
-                        var sum = Ext.util.Format.number(r.get('main') + r.get('other'), '0.00') || 0;
-                        if(r.get('x') == '收入') {
-                            Ext.getCmp('home').getViewModel().set('month_in', sum);
-                        }else if(r.get('x') == '支出') {
-                            Ext.getCmp('home').getViewModel().set('month_out', sum);
-                        }
-                    });
                 }
             }
         },
@@ -212,43 +162,6 @@ Ext.define('saas.view.home.HomeModel', {
             } 
         },
 
-        // purchase_trend: {
-        //     fields: ['x', 'y'],
-        //     autoLoad: true,
-        //     proxy: {
-        //         type: 'ajax',
-        //         // url: 'http://192.168.253.58:8920/homePage/purchaseData?sixMonths=true',
-        //         url: '/api/commons/homePage/purchaseData?sixMonths=true',
-        //         timeout: 8000,
-        //         actionMethods: {
-        //             read: 'GET'
-        //         },
-        //         reader: {
-        //             type: 'json',
-        //             rootProperty: 'data',
-        //         },
-        //         listeners: {
-        //             exception: function(proxy, response, operation, eOpts) {
-        //                 var p = Ext.getCmp('purchase_trend');
-        //                 p && p.setLoading(false);
-        //             }
-        //         }
-        //     },
-        //     sorters: [
-        //         { property: 'x', direction: 'ASC' }
-        //     ],
-        //     listeners: {
-        //         beforeload: function() {
-        //             var p = Ext.getCmp('purchase_trend');
-        //                 p && p.setLoading(true);
-        //         },
-        //         load: function(s, d) {
-        //             var p = Ext.getCmp('purchase_trend');
-        //                 p && p.setLoading(false);
-        //         }
-        //     } 
-        // },
-
         stock_amount: {
             fields: ['x', 'y'],
             autoLoad: true,

frontend/saas-web/app/view/home/charts/MonthIO.js

@@ -3,9 +3,6 @@ Ext.define('saas.view.home.charts.MonthIO', {
     xtype: 'month-io',
     id: 'month_io',
 
-    // bind: {
-    //     title: '本月收入支出额（万元）<div style="text-align: right;"><span style="font-weight:bold;">收入：{month_in}</span><span style="font-weight:bold;margin-left: 10px;">支出：{month_out}</span></div>'
-    // },
     title: '本月收入支出额（万元）',
 
     initComponent: function () {
@@ -13,87 +10,117 @@ Ext.define('saas.view.home.charts.MonthIO', {
 
         Ext.apply(me, {
             items: [{
-                xtype: 'cartesian',
-                colors: [
-                    '#2C82BE',
-                    '#82CCFF'
-                ],
+                xtype: 'echartsbase',
                 bind: {
-                    legend: {
-                        type: 'dom',
-                        docked: 'top',
-                        padding: 0,
-                        bodyPadding: 0,
-                        border: 0,
-                        cls: 'x-monthio-legend',
-                        html: '<div class="sumtip"><span>收入：{month_in}</span><span>支出：{month_out}</span></div>'
-                    },
-                    insetPadding: '{insetPadding}',
-                    store: '{month_io}'
+                    store: '{month_io}',
                 },
-                axes: [{
-                    type: 'numeric',
-                    position: 'left',
-                    adjustByMajorUnit: true,
-                    fields: ['main'],
-                    minimum: 0,
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465'
-                    },
-                    grid: {
-                        even: {
-                            stroke: '#E5EAEF'
-                        },
-                        odd: {
-                            stroke: '#E5EAEF',
-                        }
-                    },
-                    style: {
-                        fill: '#fff',
-                        strokeStyle: 'transparent'
-                    },
-                }, {
-                    type: 'category',
-                    position: 'bottom',
-                    fields: ['x'],
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465'
-                    },
-                    style: {
-                        fill: '#E5EAEF',
-                        strokeStyle: 'transparent'
-                    },
-                }],
-                series: [{
-                    type: 'bar',
-                    title: ['主营业务', '其他业务'],
-                    xField: 'x',
-                    yField: ['main', 'other'],
-                    stacked: true,
-                    bind: {
-                        style: {
-                            lineWidth: 0,
-                            strokeStyle: 'transparent',
-                            maxBarWidth: '{maxBarWidth}',
-                        },
-                    },
-                    tooltip: {
-                        trackMouse: true,
-                        renderer: me.onBarTipRender
-                    }
-                }]
+                createOption: me.createOption
             }]
         });
 
         me.callParent(arguments);
     },
 
-    onBarTipRender: function (tooltip, record, item) {
-        var fieldIndex = Ext.Array.indexOf(item.series.getYField(), item.field),
-        type = item.series.getTitle()[fieldIndex];
+    createOption: function (store) {
+        var fields = [],
+            main = [],
+            other = [],
+            data = [];
 
-        tooltip.setHtml(type + record.get('x') + ': ' + Ext.util.Format.number(record.get(item.field), '0,000.00') + '万元');
-    },
+        store.each(function (d) {
+            var d = d.data;
+            // fields.push(d.x);
+            main.push(d.main);
+            other.push(d.other);
+        });
+
+        var o = {
+            color: [
+                '#2C82BE',
+                '#82CCFF'
+            ],
+            tooltip: {
+                trigger: 'axis',
+                formatter: function (params, ticket, callback) {
+                    var p1 = params[0],
+                    marker1 = p1.marker,
+                    seriesName1 = p1.seriesName,
+                    name1 = p1.name,
+                    value1 = p1.value,
+                    p2 = params[1],
+                    marker2 = p2.marker,
+                    seriesName2 = p2.seriesName,
+                    value2 = p2.value,
+                    total = value1 + value2;
+
+                    total = saas.util.BaseUtil.numberFormat(total, 4, true);
+                    value1 = saas.util.BaseUtil.numberFormat(value1, 4, true);
+                    value2 = saas.util.BaseUtil.numberFormat(value2, 4, true);
+
+                    return name1 + ': ' + total + ' <br/>' +
+                        marker1 + seriesName1 + ': ' + value1 + '<br/>' +
+                        marker2 + seriesName2 + ': ' + value2;
+                }
+            },
+            legend: {
+                orient: 'horizontal',
+                left: 0,
+                icon: 'circle',
+                data: ['主营业务', '其他业务'],
+                itemWidth: 9,
+                itemHeight: 9
+            },
+            grid: {
+                left: 0,
+                right: 0,
+                bottom: 0,
+                top: 40,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            xAxis: [{
+                type: 'category',
+                data: ['收入', '支出'],
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                },
+            }],
+            yAxis: [{
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#E5EAEF']
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                }
+            }],
+            series: [{
+                name: '主营业务',
+                type: 'bar',
+                stack: '合计',
+                barWidth: 25,
+                data: main
+            },
+            {
+                name: '其他业务',
+                type: 'bar',
+                stack: '合计',
+                barWidth: 25,
+                data: other
+            }]
+        };
+        return o;
+    }
 });

frontend/saas-web/app/view/home/charts/MonthPurchase.js

@@ -1,91 +0,0 @@
-Ext.define('saas.view.home.charts.MonthPurchase', {
-    extend: 'saas.view.core.chart.ChartBase',
-    xtype: 'month-purchase',
-
-    id: 'month_purchase',
-
-    bind: {
-        title: '本月采购额（万元）：{month_purchase_amount}'
-    },
-
-    initComponent: function() {
-        var me = this;
-
-        Ext.apply(me, {
-            items: [{
-                xtype: 'cartesian',
-                colors: [
-                    '#34BAF6'
-                ],
-                bind: {
-                    insetPadding: '{insetPadding}',
-                    store: '{month_purchase}',
-                },
-                axes: [{
-                    type: 'category',
-                    fields: ['x'],
-                    position: 'bottom',
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465',
-                    },
-                    style: {
-                        fill: '#E5EAEF',
-                        strokeStyle: 'transparent'
-                    },
-                    renderer: me.onCategoryLabelRender
-                },{
-                    type: 'numeric',
-                    fields: ['y'],
-                    position: 'left',
-                    adjustByMajorUnit: true,
-                    grid: {
-                        even: {
-                            stroke: '#E5EAEF'
-                        },
-                        odd: {
-                            stroke: '#E5EAEF',
-                        }
-                    },
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465',
-                        textAlign: 'end'
-                    },
-                    style: {
-                        fill: '#fff',
-                        strokeStyle: 'transparent'
-                    },
-                    minimum: 0
-                }],
-                series: [{
-                    type: 'bar',
-                    xField: 'x',
-                    yField: ['y'],
-                    bind: {
-                        style: {
-                            lineWidth: 0,
-                            strokeStyle: 'transparent',
-                            maxBarWidth: '{maxBarWidth}',
-                        },
-                    },
-                    tooltip: {
-                        trackMouse: true,
-                        renderer: me.onBarTipRender
-                    }
-                }]
-            }]
-        });
-
-        me.callParent(arguments);
-    },
-
-    onCategoryLabelRender: function(axis, label, layoutContent, lastLabel) {
-        return label.substr(0,2) + '...';
-    },
-
-    onBarTipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + ': ' + Ext.util.Format.number(record.get('y'), '0,000.00') + '万元');
-    },
-
-});

frontend/saas-web/app/view/home/charts/MonthSale.js

@@ -4,6 +4,7 @@ Ext.define('saas.view.home.charts.MonthSale', {
 
     id: 'month_sale',
 
+    title: '本月销售额（万元）：0', // 设置默认标题占好默认高度，使容器内的组件可以正确获得展示高度
     bind: {
         title: '本月销售额（万元）：{month_sale_amount}'
     },
@@ -13,79 +14,89 @@ Ext.define('saas.view.home.charts.MonthSale', {
 
         Ext.apply(me, {
             items: [{
-                xtype: 'polar',
-                width: '100%',
-                height: '100%',
+                xtype: 'echartsbase',
                 bind: {
                     store: '{month_sale}',
                 },
-                colors: [
-                    '#1EC09F',
-                    '#27A7FF',
-                    '#4E84F5',
-                    '#FDC200',
-                    '#76DDFB',
-                    '#FE7D6B',
-                ],
-                interactions: ['rotate', 'itemhighlight'],
-                innerPadding: 2,
-                legend: {
-                    type: 'dom',
-                    docked: 'right',
-                    width: 120,
-                    padding: 0,
-                    bodyPadding: 0,
-                    border: 0,
-                    // liveDrag: true,
-                    cls: 'x-pie-legend'
-                },
-                style: {
-                    lineWidth: 0,
-                    stroke: "#789"
-                },
-                series: [{
-                    type: 'pie',
-                    angleField: 'y',
-                    donut: 55,
-                    label: {
-                        field: 'x',
-                        display: 'inside',
-                        renderer: me.onLabelRender,
-                        color: '#fff',
-                        font: '12px Microsoft YaHei'
-                    },
-                    style: {
-                        // lineWidth: 0,
-                        // strokeStyle: 'transparent',
-                        // fillStyle: 'transparent',
-                        // fillOpacity: 0
-                    },
-                    // label: {
-                    //     field: 'x',
-                    //     renderer: me.onLabelRender
-                    // },
-                    highlight: false,
-                    tooltip: {
-                        trackMouse: true,
-                        renderer: me.onSeriesTooltipRender
-                    }
-                }]
-            }],
+                createOption: me.createOption
+            }]
         });
 
         me.callParent(arguments);
     },
 
-    onLabelRender: function(text, sprite, config, rendererData, index) {
-        var homeModel = Ext.getCmp('home').getViewModel();
-        var monthSaleAmount = homeModel.get('month_sale_amount');
-        var store = rendererData.store;
-        var data = store.getAt(index);
-        var v = data.get('y');
-        return Ext.util.Format.number((v/monthSaleAmount)*100, '0.00') + '%';
-    },
+    createOption: function(store) {
+        var fields = [],
+        data = [];
 
-    onSeriesTooltipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + ': ' + Ext.util.Format.number(record.get('y'), '0,000.00'));
+        store.each(function(d) {
+            var d = d.data;
+            fields.push(d.x);
+            data.push({
+                value: d.y,
+                name: d.x
+            });
+        });
+
+        return {
+            color: [
+                '#1EC09F',
+                '#27A7FF',
+                '#4E84F5',
+                '#FDC200',
+                '#76DDFB',
+                '#FE7D6B',
+            ],
+            tooltip: {
+                trigger: 'item',
+                formatter: function (params, ticket, callback) {
+                    var name = params.name,
+                    value = params.value,
+                    marker = params.marker,
+                    percent = params.percent;
+
+                    if(name.length > 7) {
+                        name = Ext.String.insert(name, '<br/>', 7)
+                    }
+                    value = saas.util.BaseUtil.numberFormat(value, 4, true);
+
+                    return name + '<br/>' + marker + value+ '  (' + percent + '%)';
+                }
+            },
+            legend: {
+                orient: 'horizontal',
+                left: '70%',
+                width: '30%',
+                icon: 'circle',
+                data: fields,
+                itemWidth: 9,
+                itemHeight: 9
+            },
+            series: [
+                {
+                    type:'pie',
+                    radius: ['48%', '88%'],
+                    center: ['35%', '50%'],
+                    label: {
+                        normal: {
+                            show: false,
+                        },
+                        emphasis: {
+                            show: false,
+                            textStyle: {
+                                fontSize: '30',
+                                fontWeight: 'bold'
+                            }
+                        }
+                    },
+                    labelLine: {
+                        normal: {
+                            show: false
+                        }
+                    },
+                    data: data
+                }
+            ]
+        }
     }
 });

frontend/saas-web/app/view/home/charts/ProfitDetail.js

@@ -4,91 +4,103 @@ Ext.define('saas.view.home.charts.ProfitDetail', {
 
     id: 'profit_detail',
 
-    bind: {
-        title: '毛利润分析（万元）'
-    },
+    title: '毛利润分析（万元）',
 
-    initComponent: function() {
+    initComponent: function () {
         var me = this;
 
         Ext.apply(me, {
             items: [{
-                xtype: 'cartesian',
-                colors: [
-                    '#34BAF6'
-                ],
+                xtype: 'echartsbase',
                 bind: {
-                    insetPadding: '{insetPadding}',
                     store: '{profit_detail}',
                 },
-                axes: [{
-                    type: 'category',
-                    fields: ['x'],
-                    position: 'bottom',
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465',
-                    },
-                    style: {
-                        fill: '#E5EAEF',
-                        strokeStyle: 'transparent'
-                    },
-                    renderer: me.onCategoryLabelRender
-                },{
-                    type: 'numeric',
-                    fields: ['y'],
-                    position: 'left',
-                    adjustByMajorUnit: true,
-                    grid: {
-                        even: {
-                            stroke: '#E5EAEF'
-                        },
-                        odd: {
-                            stroke: '#E5EAEF',
-                        }
-                    },
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465',
-                        textAlign: 'end'
-                    },
-                    style: {
-                        fill: '#fff',
-                        strokeStyle: 'transparent'
-                    },
-                    minimum: 0
-                }],
-                series: [{
-                    type: 'bar',
-                    xField: 'x',
-                    yField: ['y'],
-                    bind: {
-                        style: {
-                            lineWidth: 0,
-                            strokeStyle: 'transparent',
-                            maxBarWidth: '{maxBarWidth}',
-                        },
-                    },
-                    tooltip: {
-                        trackMouse: true,
-                        renderer: me.onBarTipRender
-                    }
-                }]
+                createOption: me.createOption
             }]
         });
 
         me.callParent(arguments);
     },
 
-    onCategoryLabelRender: function(axis, label, layoutContent, lastLabel) {
-        var cWidth = this.gridSurface.el.dom.clientWidth,
-        dataCount = layoutContent.data.length,
-        maxLength = Math.ceil((cWidth/dataCount)/20);
-        return label.length > maxLength ? label.substring(0, maxLength) + '...' : label;
-    },
+    createOption: function (store) {
+        var fields = [],
+            data = [];
 
-    onBarTipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + ': ' + Ext.util.Format.number(record.get('y'), '0,000.00') + '万元');
-    },
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.x);
+            data.push(d.y);
+        });
+        return {
+            color: [
+                '#34BAF6'
+            ],
+            grid: {
+                left: 0,
+                right: 0,
+                top: 10,
+                bottom: 0,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            tooltip: {
+                trigger: 'item',
+                formatter: "{b}<br/>{c}",
+                formatter: function (params, ticket, callback) {
+                    var marker = params.marker,
+                    name = params.name,
+                    value = params.value;
+
+                    if(name.length > 7) {
+                        name = Ext.String.insert(name, '<br/>', 7)
+                    }
+
+                    value = saas.util.BaseUtil.numberFormat(value, 4, true);
+
+                    return name + ':<br/>' + marker + value;
+                }
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                axisLabel: {
+                    color: '#485465',
+                    interval: 0,
+                    formatter: function (value, index) {
+                        var cWidth = Ext.getCmp('profit_detail').items.items[0].echarts.getWidth() * 0.9,
+                            dataCount = fields.length,
+                            maxLength = Math.ceil((cWidth / dataCount) / 20);
+                        return value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
+                    },
+                },
+                data: fields,
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#E5EAEF']
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                }
+            },
+            series: [{
+                type: 'bar',
+                barWidth: 25,
+                data: data,
+            }]
+        };
+    }
 
-});
+});

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

@@ -1,98 +0,0 @@
-Ext.define('saas.view.home.charts.PurchaseTrend', {
-    extend: 'saas.view.core.chart.ChartBase',
-    xtype: 'purchase-trend',
-
-    id: 'purchase_trend',
-
-    bind: {
-        title: '近六月采购趋势图（万元）'
-    },
-
-    initComponent: function() {
-        var me = this;
-
-        Ext.apply(me, {
-            items: [{
-                xtype: 'cartesian',
-                colors: [
-                    '#34BAF6'
-                ],
-                bind: {
-                    insetPadding: '{insetPadding}',
-                    store: '{purchase_trend}',
-                },
-                axes: [{
-                    // title: {
-                    //     text: '月',
-                    //     fontSize: 14,
-                    // },
-                    type: 'category',
-                    fields: ['x'],
-                    position: 'bottom',
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465'
-                    },
-                    style: {
-                        fill: '#E5EAEF',
-                        strokeStyle: 'transparent'
-                    },
-                    renderer: me.categoryRender
-                },{
-                    type: 'numeric',
-                    fields: ['y'],
-                    position: 'left',
-                    grid: {
-                        even: {
-                            stroke: '#E5EAEF'
-                        },
-                        odd: {
-                            stroke: '#E5EAEF',
-                        }
-                    },
-                    label: {
-                        fontSize: '12px',
-                        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',
-                    // },
-                    bind: {
-                        style: {
-                            lineWidth: 0,
-                            strokeStyle: 'transparent',
-                            maxBarWidth: '{maxBarWidth}',
-                        },
-                    },
-                }]
-            }]
-        });
-
-        me.callParent(arguments);
-    },
-
-    onBarTipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + '月: ' + Ext.util.Format.number(record.get('y'), '0,000.00') + '万元');
-    },
-
-    categoryRender: function(axis, label, layoutContext, lastLabel) {
-        return label + '月';
-    }
-
-});

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

@@ -4,194 +4,126 @@ Ext.define('saas.view.home.charts.SaleTrend', {
 
     id: 'sale_trend',
 
-    bind: {
-        title: '近六月销售趋势图（万元）'
-    },
+    title: '近六月销售趋势图（万元）',
+    bodyPadding: '16 0 16 0',
 
-    initComponent: function() {
+    initComponent: function () {
         var me = this;
 
         Ext.apply(me, {
             items: [{
-                xtype: 'cartesian',
-                colors: [
-                    '#64B0E4',
-                    '#FF1038'
-                ],
+                xtype: 'echartsbase',
                 bind: {
-                    insetPadding: '{insetPadding}',
                     store: '{sale_trend}',
                 },
-                // legend: {
-                //     type: 'dom',
-                //     docked: 'top',
-
-                // },
-                axes: [{
-                    // title: {
-                    //     text: '月',
-                    //     fontSize: 14,
-                    // },
-                    type: 'category',
-                    fields: ['x'],
-                    position: 'bottom',
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465',
-                    },
-                    style: {
-                        fill: '#E5EAEF',
-                        strokeStyle: 'transparent'
-                    },
-                    renderer: me.categoryRender
-                },{
-                    type: 'numeric',
-                    fields: ['sale', 'saleback'],
-                    position: 'left',
-                    grid: {
-                        even: {
-                            stroke: '#E5EAEF',
-                        },
-                        odd: {
-                            stroke: '#E5EAEF',
-                        }
-                    },
-                    label: {
-                        fontSize: '12px',
-                        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,
-                    },
-                }],
-                legend: {
-                    type: 'dom',
-                    docked: 'top',
-                    padding: 0,
-                    bodyPadding: 0,
-                    border: 0,
-                    cls: 'x-saletrend-legend'
-                },
-                listeners: {
-                    itemhighlightchange: me.itemhighlightchange
-                }
+                createOption: me.createOption
             }]
         });
 
         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;
-    },
+    createOption: function (store) {
+        var fields = [],
+        sale = [],
+        saleBack = [],
+        data = [];
 
-    onSeriesTooltipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + '月: ' + Ext.util.Format.number(record.get(item.series.getYField()), '0,000.00') + '万元');
-    },
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.x + '月');
+            sale.push(d.sale);
+            saleBack.push(d.saleback);
+        });
 
-    categoryRender: function(axis, label, layoutContext, lastLabel) {
-        return label + '月';
-    },
+        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 p1 = params[0],
+                    marker1 = p1.marker,
+                    seriesName1 = p1.seriesName,
+                    name1 = p1.name,
+                    value1 = p1.value,
+                    p2 = params[1],
+                    marker2 = p2.marker,
+                    seriesName2 = p2.seriesName,
+                    value2 = p2.value;
 
-    itemhighlightchange: function(chart, newHighlightItem, oldHighlightItem) {
-        this.setSeriesLineWidth(newHighlightItem, 4);
-        this.setSeriesLineWidth(oldHighlightItem, 2);
-    },
+                    value1 = saas.util.BaseUtil.numberFormat(value1, 4, true);
+                    value2 = saas.util.BaseUtil.numberFormat(value2, 4, true);
 
-    setSeriesLineWidth: function (item, lineWidth) {
-        console.log('xxxx');
-        if (item) {
-            item.series.setStyle({
-                lineWidth: lineWidth
-            });
+                    return name1 + ': ' + '<br/>' +
+                        marker1 + seriesName1 + ': ' + value1 + '<br/>' +
+                        marker2 + seriesName2 + ': ' + value2;
+                }
+            },
+            legend: {
+                left: 0,
+                data: ['销售额', '销售回款'],
+                icon: 'rect',
+                itemWidth: 10,
+                itemHeight: 2
+            },
+            grid: {
+                left: 0,
+                right: 16,
+                bottom: 0,
+                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
         }
-    },
-
-});
+    }
+});

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

@@ -4,89 +4,93 @@ Ext.define('saas.view.home.charts.StockAmount', {
 
     id: 'stock_amount',
 
-    bind: {
-        title: '近六月库存金额图（万元）'
-    },
+    title: '近六月库存金额图（万元）',
 
-    initComponent: function() {
+    initComponent: function () {
         var me = this;
 
         Ext.apply(me, {
             items: [{
-                xtype: 'cartesian',
-                colors: [
-                    '#34BAF6'
-                ],
+                xtype: 'echartsbase',
                 bind: {
-                    insetPadding: '{insetPadding}',
                     store: '{stock_amount}',
                 },
-                axes: [{
-                    // title: {
-                    //     text: '月',
-                    //     fontSize: 14,
-                    // },
-                    type: 'category',
-                    fields: ['x'],
-                    position: 'bottom',
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465'
-                    },
-                    style: {
-                        fill: '#E5EAEF',
-                        strokeStyle: 'transparent'
-                    },
-                    renderer: me.categoryRender
-                },{
-                    type: 'numeric',
-                    fields: ['y'],
-                    position: 'left',
-                    grid: {
-                        even: {
-                            stroke: '#E5EAEF',
-                        },
-                        odd: {
-                            stroke: '#E5EAEF',
-                        }
-                    },
-                    label: {
-                        fontSize: '12px',
-                        fillStyle: '#485465'
-                    },
-                    style: {
-                        fill: '#fff',
-                        strokeStyle: 'transparent'
-                    },
-                }],
-                series: [{
-                    type: 'bar',
-                    xField: 'x',
-                    yField: ['y'],
-                    tooltip: {
-                        trackMouse: true,
-                        renderer: me.onBarTipRender
-                    },
-                    bind: {
-                        style: {
-                            lineWidth: 0,
-                            strokeStyle: 'transparent',
-                            maxBarWidth: '{maxBarWidth}',
-                        },
-                    },
-                }]
+                createOption: me.createOption
             }]
         });
 
         me.callParent(arguments);
     },
 
-    onBarTipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + '月: ' + Ext.util.Format.number(record.get('y'), '0,000.00') + '万元');
-    },
+    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 p = params[0],
+                    marker = p.marker,
+                    name = p.name,
+                    value = p.value;
+
+                    value = saas.util.BaseUtil.numberFormat(value, 4, true);
 
-    categoryRender: function(axis, label, layoutContext, lastLabel) {
-        return label + '月';
+                    return name + ':<br/>' + marker + value;
+                }
+            },
+            grid: {
+                left: 0,
+                right: 0,
+                bottom: 0,
+                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
+            }]
+        }
     }
 
 });