首页调整

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

@@ -50,7 +50,8 @@ Ext.define('saas.view.home.charts.MonthSale', {
                     '#1E90FF',
                     '#B0E0E6'
                 ],
-                innerPadding: 0,
+                interactions: ['rotate', 'itemhighlight'],
+                innerPadding: 2,
                 legend: {
                     type: 'dom',
                     docked: 'right',
@@ -76,11 +77,17 @@ Ext.define('saas.view.home.charts.MonthSale', {
                         color: '#fff',
                         font: '12px Microsoft YaHei'
                     },
+                    style: {
+                        // lineWidth: 0,
+                        // strokeStyle: 'transparent',
+                        // fillStyle: 'transparent',
+                        // fillOpacity: 0
+                    },
                     // label: {
                     //     field: 'x',
                     //     renderer: me.onLabelRender
                     // },
-                    highlight: true,
+                    highlight: false,
                     tooltip: {
                         trackMouse: true,
                         renderer: me.onSeriesTooltipRender

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

@@ -71,15 +71,31 @@ Ext.define('saas.view.home.charts.SaleTrend', {
                     },
                 }],
                 series: [{
-                    type: 'line',
-                    smooth: true,
-                    title: '销售额',
-                    xField: 'x',
-                    yField: ['sale'],
                     tooltip: {
                         trackMouse: true,
                         renderer: me.onSeriesTooltipRender
-                    }
+                    },
+                    type: 'line',
+                    smooth: true,
+                    xField: 'x',
+                    yField: 'sale',
+                    marker: {
+                        radius: 0,
+                        lineWidth: 0
+                    },
+                    highlight: {
+                        fillStyle: '#53A8E2',
+                        fillOpacity: 1,
+                        strokeStyle: '#A3D0EE',
+                        radius: 5,
+                        lineWidth: 2,
+                    },
+                    style: {
+                        lineWidth: 2,
+                        fillStyle: '#53A8E2',
+                        fillOpacity: 0.1,
+                    },
+                    // renderer: me.onSeriesRenderer
                 }, {
                     type: 'line',
                     smooth: true,
@@ -89,21 +105,78 @@ Ext.define('saas.view.home.charts.SaleTrend', {
                     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) {
-        var title = item.series.getTitle();
-        tooltip.setHtml(record.get('x') + title + record.get(item.series.getYField()) + '万元');
+        tooltip.setHtml(record.get('x') + '月: ' + record.get(item.series.getYField()) + '万元');
     },
 
     categoryRender: function(axis, label, layoutContext, lastLabel) {
         return label + '月';
-    }
+    },
+
+    itemhighlightchange: function(chart, newHighlightItem, oldHighlightItem) {
+        debugger;
+        this.setSeriesLineWidth(newHighlightItem, 4);
+        this.setSeriesLineWidth(oldHighlightItem, 2);
+    },
+
+    setSeriesLineWidth: function (item, lineWidth) {
+        console.log('xxxx');
+        if (item) {
+            item.series.setStyle({
+                lineWidth: lineWidth
+            });
+        }
+    },
 
 });