支持分组bar

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

@@ -39,64 +39,124 @@ export default class ColumnChart extends Component {
     if(data.length >0){
       adjustStack = data[0].hasOwnProperty("gField");
     }
+    if(!adjustStack) {
+      return (
+          <div className='bar-graph'
+               style={{ width: '100%', backgroundColor: '#fff' }}>
+            <div className="ant-table-title">{SONTITLE_}</div>
+            <div
+                className="ant-table-title-second">{FORMULA_KEYDISPLAY_
+                ? FORMULA_KEYDISPLAY_
+                : ''}{FORMULA_VALUEDISPLAY_} {'单位(' + FORMULA_UNIT_ + ')'}</div>
+            <Chart
+                theme={{ maxColumnWidth: 20 }}
+                padding={[25, 15, 40, 50]}
+                height={300}
+                autoFit
+                data={data}
+            >
+              <Axis name='xField'
+                    label={{
+                      rotate: -126,
+                      autoRotate: false,
+                      offset: 15,
+                      textStyle: {
+                        textAlign: 'start',
+                        fill: '#333333', // 文本的颜色
+                        fontSize: 12, // 文本大小
+                        textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
+                      },
+                    }}
+              />
+              <Interval
+                  position="xField*yField"
+                  color={'xField'}
+                  label={[
+                    'yField',
+                    (val) => {
+                      return {
+                        content: val,
+                        style: {
+                          fill: '#333333',
+                          fontSize: 12
+                        }
+                      }
+                    },
+                  ]}
+                  tooltip={[
+                    'yField*xField',
+                    (value, name) => {
+                      return {
+                        name: `${name}`,
+                        value,
+                      }
+                    },
+                  ]}/>
+              <Tooltip showTitle={false}/>
+            </Chart>
+          </div>
+      )
+    }else {
+      return (
+          <div className='bar-graph'
+               style={{ width: '100%', backgroundColor: '#fff' }}>
+            <div className="ant-table-title">{SONTITLE_}</div>
+            <div
+                className="ant-table-title-second">{FORMULA_KEYDISPLAY_
+                ? FORMULA_KEYDISPLAY_
+                : ''}{FORMULA_VALUEDISPLAY_} {'单位(' + FORMULA_UNIT_ + ')'}</div>
+            <Chart
+                theme={{ maxColumnWidth: 20 }}
+                padding={[25, 15, 40, 50]}
+                height={300}
+                autoFit
+                data={data}
+            >
+              <Axis name='xField'
+                    label={{
+                      rotate: -126,
+                      autoRotate: false,
+                      offset: 15,
+                      textStyle: {
+                        textAlign: 'start',
+                        fill: '#333333', // 文本的颜色
+                        fontSize: 12, // 文本大小
+                        textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
+                      },
+                    }}
+              />
+              <Interval
+                  position="xField*yField"
+                  color={'gField'}
+                  adjust={[{ type: 'stack' }]}
+                  label={[
+                    'yField',
+                    (val) => {
+                      return {
+                        content: val,
+                        style: {
+                          fill: '#333333',
+                          fontSize: 12
+                        }
+                      }
+                    },
+                  ]}
+                  tooltip={[
+                    'yField*xField',
+                    (value, name) => {
+                      return {
+                        name: `${name}`,
+                        value,
+                      }
+                    },
+                  ]}/>
+              <Tooltip showTitle={false}/>
+            </Chart>
+          </div>
+      )
+
+    }
 
-    return (
-      <div className='bar-graph'
-           style={{ width: '100%', backgroundColor: '#fff' }}>
-        <div className="ant-table-title">{SONTITLE_}</div>
-        <div
-          className="ant-table-title-second">{FORMULA_KEYDISPLAY_
-          ? FORMULA_KEYDISPLAY_
-          : ''}{FORMULA_VALUEDISPLAY_} {'单位(' + FORMULA_UNIT_ + ')'}</div>
-        <Chart
-          theme={{ maxColumnWidth: 20 }}
-          padding={[25, 15, 40, 50]}
-          height={300}
-          autoFit
-          data={data}
-        >
-          <Axis name='xField'
-                label={{
-                  rotate: -126,
-                  autoRotate: false,
-                  offset: 15,
-                  textStyle: {
-                    textAlign: 'start',
-                    fill: '#333333', // 文本的颜色
-                    fontSize: 12, // 文本大小
-                    textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
-                  },
-                }}
-          />
-          <Interval
-            position="xField*yField"
-            color={[adjustStack?'gField':'xField']}
-            adjust={[adjustStack?"stack":""]}
-            label={[
-              'yField',
-              (val) => {
-                return {
-                  content: val,
-                  style: {
-                    fill: '#333333',
-                    fontSize: 12
-                  }
-                }
-              },
-            ]}
-            tooltip={[
-              'yField*xField',
-              (value, name) => {
-                return {
-                  name: `${name}`,
-                  value,
-                }
-              },
-            ]}/>
-          <Tooltip showTitle={false}/>
-        </Chart>
-      </div>
-    )
   }
 
   formatData = (data) => {