fixed charts color style

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
-            <Axis name="y" title={false} line={false} tickLine={false} min={0} />
+              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>

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 = {

src/components/Charts/index.less

@@ -3,7 +3,7 @@
   width: 100%;
   .chartContent {
     position: absolute;
-    bottom: -34px;
+    bottom: -28px;
     width: 100%;
     > div {
       margin: 0 -5px;

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);

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}>