From 481787a7aae492ebda5565d7e8a817b24ff5e7e5 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 3 Jan 2018 11:00:07 +0800
Subject: [PATCH] fixed charts color style

---
 src/components/Charts/Bar/index.js      | 22 +++++++++++++++++-----
 src/components/Charts/MiniArea/index.js |  3 +--
 src/components/Charts/index.less        |  2 +-
 src/g2.js                               | 13 ++++++++++++-
 src/routes/Dashboard/Analysis.js        |  2 +-
 5 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index c63bc92b..9eee7a07 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -55,7 +55,14 @@ class Bar extends Component {
   };
 
   render() {
-    const { height, title, forceFit = true, data, color = 'rgba(24, 144, 255, 0.85)', padding } = this.props;
+    const {
+      height,
+      title,
+      forceFit = true,
+      data,
+      color = 'rgba(24, 144, 255, 0.85)',
+      padding,
+    } = this.props;
 
     const { autoHideXLabels } = this.state;
 
@@ -79,16 +86,21 @@ class Bar extends Component {
     return (
       <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
         <div ref={this.handleRef}>
-          {title && <h4>{title}</h4>}
+          {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
           <Chart
             scale={scale}
-            height={height}
+            height={title ? height - 41 : height}
             forceFit={forceFit}
             data={data}
             padding={padding || 'auto'}
           >
-            <Axis name="x" title={false} label={!autoHideXLabels} tickLine={!autoHideXLabels} />
-            <Axis name="y" title={false} line={false} tickLine={false} min={0} />
+            <Axis
+              name="x"
+              title={false}
+              label={autoHideXLabels ? false : {}}
+              tickLine={autoHideXLabels ? false : {}}
+            />
+            <Axis name="y" min={0} />
             <Tooltip showTitle={false} crosshairs={false} />
             <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
           </Chart>
diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index e84a3bc3..2fc1fc82 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -11,6 +11,7 @@ export default class MiniArea extends React.Component {
       data = [],
       forceFit = true,
       color = 'rgba(24, 144, 255, 0.2)',
+      borderColor = '#1089ff',
       scale = {},
       borderWidth = 2,
       line,
@@ -19,8 +20,6 @@ export default class MiniArea extends React.Component {
       animate = true,
     } = this.props;
 
-    const borderColor = this.props.borderColor || color;
-
     const padding = [36, 5, 30, 5];
 
     const scaleProps = {
diff --git a/src/components/Charts/index.less b/src/components/Charts/index.less
index 43cfc8bf..190428bc 100644
--- a/src/components/Charts/index.less
+++ b/src/components/Charts/index.less
@@ -3,7 +3,7 @@
   width: 100%;
   .chartContent {
     position: absolute;
-    bottom: -34px;
+    bottom: -28px;
     width: 100%;
     > div {
       margin: 0 -5px;
diff --git a/src/g2.js b/src/g2.js
index 81ca055f..21e22c28 100644
--- a/src/g2.js
+++ b/src/g2.js
@@ -1,4 +1,15 @@
 // 全局 G2 设置
-import { track } from 'bizcharts';
+import { track, setTheme } from 'bizcharts';
 
 track(false);
+
+const config = {
+  defaultColor: '#1089ff',
+  shape: {
+    interval: {
+      fillOpacity: 1,
+    },
+  },
+};
+
+setTheme(config);
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index 8cfe32a3..8d972ba6 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -330,7 +330,7 @@ export default class Analysis extends Component {
                 <Row>
                   <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                     <div className={styles.salesBar}>
-                      <Bar height={270} title="销售额趋势" data={salesData} />
+                      <Bar height={295} title="销售额趋势" data={salesData} />
                     </div>
                   </Col>
                   <Col xl={8} lg={12} md={12} sm={24} xs={24}>
-- 
GitLab