产品-薪酬统计报表

pc4mobx/hrmSalary/pages/reportView/components/condition.js

@@ -335,3 +335,34 @@ export const mapLineOptions = (params) => ({
     };
   })
 });
+export const mapPieOptions = (params) => ({
+  tooltip: {
+    show: true,
+    formatter: function (params) {
+      let str = params.seriesName + "<br>";
+      str += params.marker + params.name + "<span style='display:inline-block;width: 50px'></span>" + params.value + "(" + params.percent + "%" + ")" + "<br>";
+      return str;
+    }
+  },
+  legend: {
+    icon: "rect",
+    top: "0%",
+    left: "2%",
+    orient: "vertical",
+    itemGap: 10,
+    textStyle: {
+      fontSize: 12,//字体大小
+      color: "#787E95"//字体颜色
+    }
+  },
+  series: _.map(params.data, item => {
+    return {
+      name: item.name,
+      data: item.data,
+      type: "pie",
+      radius: "60%",
+      avoidLabelOverlap: false,
+      animation: false
+    };
+  })
+});

pc4mobx/hrmSalary/pages/reportView/components/reportContent.js

@@ -9,7 +9,7 @@ import { Spin } from "antd";
 import { WeaEchart } from "ecCom";
 import RightOptions from "./rightOptions";
 import ChartsRangeSettingsModal from "./chartsRangeSettingsModal";
-import { mapBarOptions, mapLineOptions } from "./condition";
+import { mapBarOptions, mapLineOptions, mapPieOptions } from "./condition";
 import { queryRangeSetting, reportStatisticsReportGetData } from "../../../apis/statistics";
 import "../index.less";
 
@@ -122,12 +122,12 @@ class ReportContent extends Component {
                       name: item.dimension,
                       data: _.map(itemValues, child => {
                         const key = child + itemColValue.slice(_.indexOf(itemColValue, "_"));
-                        return item[key];
+                        return item[key] || "0";
                       })
                     };
                   })
                 }
-              }, () => console.log(this.state.chartsInfo));
+              });
               break;
             case "line":
               this.setState({
@@ -135,15 +135,32 @@ class ReportContent extends Component {
                   xAxis: _.map(dataSource, it => it.dimension),
                   data: _.map(itemValues, item => {
                     return {
-                      name: _.find(_.reduce(_.filter(columns, col => !_.isNil(col.children)), (pre, cur) => ([...pre, ...cur.children]), []), it => it.column === itemColValue).text,
+                      name: `${_.find(_.reduce(_.filter(columns, col => !_.isNil(col.children)), (pre, cur) => ([...pre, ...cur.children]), []), it => it.column === itemColValue).text}(${_.find(columns, it => it.column === item).text})`,
                       data: _.map(dataSource, child => {
                         const key = item + itemColValue.slice(_.indexOf(itemColValue, "_"));
-                        return child[key];
+                        return child[key] || "0";
                       })
                     };
                   })
                 }
-              }, () => console.log(this.state.chartsInfo));
+              });
+              break;
+            case "pie":
+              this.setState({
+                chartsInfo: {
+                  data: _.map(itemValues, item => {
+                    return {
+                      name: _.find(_.reduce(_.filter(columns, col => !_.isNil(col.children)), (pre, cur) => ([...pre, ...cur.children]), []), it => it.column === itemColValue).text,
+                      data: _.map(dataSource, child => {
+                        return {
+                          name: child["dimension"],
+                          value: child[itemColValue]
+                        };
+                      })
+                    };
+                  })
+                }
+              });
               break;
             default:
               break;
@@ -184,12 +201,13 @@ class ReportContent extends Component {
   };
   renderCharts = () => {
     const { chartsInfo, viewType } = this.state;
-    return _.isEmpty(chartsInfo) ? <ChartEmptyComp/> : (viewType === "bar" || viewType === "line") ?
-      <WeaEchart
-        ref="chart" useDefault={false} className="chart"
-        option={viewType === "bar" ? mapBarOptions(chartsInfo) : mapLineOptions(chartsInfo)}
-      /> :
-      <div>123</div>;
+    return _.isEmpty(chartsInfo) ?
+      <ChartEmptyComp/> : (viewType === "bar" || viewType === "line" || viewType === "pie") ?
+        <WeaEchart
+          ref="chart" useDefault={false} className="chart"
+          option={viewType === "bar" ? mapBarOptions(chartsInfo) : viewType === "line" ? mapLineOptions(chartsInfo) : mapPieOptions(chartsInfo)}
+        /> :
+        <div>123</div>;
   };
 
   render() {