订阅支持条形图

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

@@ -0,0 +1,125 @@
+/**
+ * Created by zhouy on 2022/07/21
+ * Desc: 条形图
+ */
+
+import React, { Component } from 'react'
+import { Chart, Interval, Axis, Tooltip,Coordinate } from 'bizcharts'
+import { fetchPostObj } from '../../../utils/common/fetchRequest'
+import { API } from '../../../configs/api.config'
+import { isObjEmpty } from '../../../utils/common/common.util'
+import { message } from 'antd'
+
+export default class ColumnChart extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {
+      detailData: [],
+    }
+  }
+
+  componentDidMount () {
+    this.getChartData()
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    let { chartData: { SONTITLE_, FORMULA_VALUEDISPLAY_, FORMULA_KEYDISPLAY_, FORMULA_UNIT_ } } = this.props
+    let data = []
+    let { detailData } = this.state
+    if (!isObjEmpty(detailData)) {
+      data = this.formatData(JSON.parse(detailData))
+    }
+
+    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"
+            label={[
+              'yField',
+              (val) => {
+                return {
+                  content: val,
+                  style: {
+                    fill: '#333333',
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                  },
+                }
+              },
+            ]}
+            tooltip={[
+              'yField*xField',
+              (value, name) => {
+                return {
+                  name: `${name}`,
+                  value,
+                }
+              },
+            ]}/>
+          <Coordinate transpose />
+          <Tooltip showTitle={false}/>
+        </Chart>
+      </div>
+    )
+  }
+
+  formatData = (data) => {
+    data = data.map(function (item, index, arr) {
+      item.yField = Number(item.yField)
+      return item
+    })
+    data.reverse()
+    return data
+  }
+
+  getChartData = () => {
+    let { chartData: { INSTANCE_ID_, FORMULA_ID_ } } = this.props
+    fetchPostObj(API.COMMON_GETSUBSDATA, {
+      INSTANCE_ID_: INSTANCE_ID_,
+      FORMULA_ID_: FORMULA_ID_,
+    }).then(response => {
+      this.setState({
+        detailData: response.data.list[0].DATA_,
+      })
+    }).catch(error => {
+      if (typeof error === 'string') {
+        message.error(error)
+      } else {
+        message.error('图表数据获取失败')
+      }
+    })
+  }
+
+}

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

@@ -10,7 +10,7 @@ import { API } from '../../../configs/api.config'
 import { isObjEmpty } from '../../../utils/common/common.util'
 import { message } from 'antd'
 
-export default class BarGraph extends Component {
+export default class ColumnChart extends Component {
 
   constructor () {
     super()

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

@@ -4,7 +4,8 @@
  */
 
 import React, { Component } from 'react'
-import BarGraph from './BarGraph'
+import ColumnChart from './ColumnChart'
+import BarChart from './BarChart'
 import LineChart from './LineChart'
 import PieChart from './PieChart'
 import TableChart from './TableChart'
@@ -33,12 +34,15 @@ export default class CommonCharts extends Component {
   }
 
   render () {
-    //BarGraph柱状 LineChart折线 PieChart圆饼 TableChart表格
+    //ColumnChart柱状 LineChart折线 PieChart圆饼 TableChart表格
     let { chartData: { TYPE_ }, setOverflow, needSum } = this.props
     let chartItem = null
     switch (TYPE_) {
       case 'column':
-        chartItem = <BarGraph chartData={this.props.chartData}/>
+        chartItem = <ColumnChart chartData={this.props.chartData}/>
+        break
+      case 'bar':
+        chartItem = <BarChart chartData={this.props.chartData}/>
         break
       case 'line':
         chartItem = <LineChart chartData={this.props.chartData}/>