Browse Source

支持分组柱状图展示

zhouy 3 years ago
parent
commit
0cc6475496

+ 2 - 0
uas-office-web/uas-mobile/src/components/common/bizgoblin/BarChart.jsx

@@ -31,6 +31,7 @@ export default class ColumnChart extends Component {
   render () {
     let { chartData: { SONTITLE_, FORMULA_VALUEDISPLAY_, FORMULA_KEYDISPLAY_, FORMULA_UNIT_ } } = this.props
     let data = []
+    let adjustStack = false
     let { detailData } = this.state
     if (!isObjEmpty(detailData)) {
       data = this.formatData(JSON.parse(detailData))
@@ -40,6 +41,7 @@ export default class ColumnChart extends Component {
       height = '300'
     } else {
       height = data.length * 30
+      adjustStack = data[0].hasOwnProperty("gField");
     }
     return (
       <div className='bar-graph'

+ 9 - 4
uas-office-web/uas-mobile/src/components/common/bizgoblin/ColumnChart.jsx

@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from 'react'
-import { Chart, Interval, Axis, Tooltip, Geom } from 'bizcharts'
+import { Chart, Interval, Axis, Tooltip, StackedColumnChart } from 'bizcharts'
 import { fetchPostObj } from '../../../utils/common/fetchRequest'
 import { API } from '../../../configs/api.config'
 import { isObjEmpty } from '../../../utils/common/common.util'
@@ -31,10 +31,14 @@ export default class ColumnChart extends Component {
   render () {
     let { chartData: { SONTITLE_, FORMULA_VALUEDISPLAY_, FORMULA_KEYDISPLAY_, FORMULA_UNIT_ } } = this.props
     let data = []
+    let adjustStack = false
     let { detailData } = this.state
     if (!isObjEmpty(detailData)) {
       data = this.formatData(JSON.parse(detailData))
     }
+    if(data.length >0){
+      adjustStack = data[0].hasOwnProperty("gField");
+    }
 
     return (
       <div className='bar-graph'
@@ -66,6 +70,8 @@ export default class ColumnChart extends Component {
           />
           <Interval
             position="xField*yField"
+            color={[adjustStack?'gField':'xField']}
+            adjust={[adjustStack?"stack":""]}
             label={[
               'yField',
               (val) => {
@@ -73,9 +79,8 @@ export default class ColumnChart extends Component {
                   content: val,
                   style: {
                     fill: '#333333',
-                    fontSize: 12,
-                    fontWeight: 'bold',
-                  },
+                    fontSize: 12
+                  }
                 }
               },
             ]}