diff --git a/pc4mobx/hrmSalary/pages/reportView/components/condition.js b/pc4mobx/hrmSalary/pages/reportView/components/condition.js
index c8422666..fba734b3 100644
--- a/pc4mobx/hrmSalary/pages/reportView/components/condition.js
+++ b/pc4mobx/hrmSalary/pages/reportView/components/condition.js
@@ -153,7 +153,11 @@ export const condition = [
   }
 ];
 
-const colorList = ["#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"];
+const colorList = [
+  "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81",
+  "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81",
+  "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81", "#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"
+];
 export const mapBarOptions = (params) => ({
   tooltip: {
     trigger: "axis",
@@ -176,6 +180,7 @@ export const mapBarOptions = (params) => ({
     }
   },
   legend: {
+    type: "scroll",
     icon: "rect",
     top: "0%",
     right: "center",
@@ -188,27 +193,33 @@ export const mapBarOptions = (params) => ({
   grid: {
     top: "10%",
     right: "0%",
-    left: "2%",
+    left: "5%",
     bottom: "0%",
     containLabel: true
   },
-  xAxis: {
-    type: "category",
-    axisTick: {
-      alignWithLabel: true,
-      show: false
-    },
-    data: params.xAxis,
-    axisLabel: {
-      interval: 0,
-      margin: 10,
-      textStyle: {
-        fontSize: 11
+  xAxis: params.xAxis.map((item, index) => {
+    const data = Array(params.xAxis.length).fill("");
+    data[index] = item;
+    return {
+      type: "category",
+      position: "bottom",
+      data: data,
+      axisTick: {
+        alignWithLabel: true,
+        show: false
+      },
+      axisLabel: {
+        interval: 0,
+        margin: 10,
+        textStyle: {
+          fontSize: 11
+        }
       }
-    }
-  },
+    };
+  }),
   yAxis: {
     name: params.name,
+    type: "value",
     axisLabel: {
       padding: [3, 0, 0, 0],
       formatter: "{value}",
@@ -237,50 +248,9 @@ export const mapBarOptions = (params) => ({
       }
     }
   },
-  series: _.map(params.data, (item, index) => {
-    return {
-      name: item.name,
-      barWidth: "32",
-      data: _.map(item.data, (it) => it.replace(/,/g, "")),
-      type: "bar",
-      itemStyle: {
-        normal: {
-          color: function (params) {
-            return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
-          }
-        }
-      },
-      label: {
-        show: true,
-        position: "insideBottom",
-        distance: 15,
-        align: "left",
-        verticalAlign: "middle",
-        rotate: "90",
-        formatter: function (params) {
-          if (parseInt(params.value) === 0) {
-            return ``;
-          } else {
-            return [
-              `{a|${format_with_regex(params.value)}} {b|${params.seriesName}}`
-            ];
-          }
-        },
-        rich: {
-          a: {
-            fontWeight: "bold",
-            fontSize: 14,
-            color: "#333",
-            marginRight: 10
-          },
-          b: {
-            fontSize: 12,
-            color: "#333"
-          }
-        }
-      }
-    };
-  })
+  series: params.data.map(item => {
+    return [...dealBar(_.map(item.data, (it) => parseFloat(it.replace(/,/g, ""))), item.name)];
+  }).reduce((acc, cur) => acc.concat(cur), [])
 });
 export const mapLineOptions = (params) => ({
   tooltip: {
@@ -292,6 +262,7 @@ export const mapLineOptions = (params) => ({
     }
   },
   legend: {
+    type: "scroll",
     icon: "circle",
     top: "0%",
     right: "center",
@@ -385,6 +356,7 @@ export const mapPieOptions = (params) => ({
     }
   },
   legend: {
+    type: "scroll",
     icon: "rect",
     top: "0%",
     left: "2%",
@@ -420,3 +392,60 @@ export const mapPieOptions = (params) => ({
     };
   })
 });
+
+const dealBar = (arr, name) => {
+  const bar = [];
+  arr.forEach((item, index) => {
+    const data = [];
+    for (let i = 0; i < index; i++) {
+      data.push("");
+    }
+    if (item) {
+      data.push(item);
+      bar.push({
+        name,
+        type: "bar",
+        xAxisIndex: index,
+        barWidth: 32,
+        data,
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: "insideBottom",
+          distance: 15,
+          align: "left",
+          verticalAlign: "middle",
+          rotate: "90",
+          formatter: function (params) {
+            if (parseInt(params.value) === 0) {
+              return ``;
+            } else {
+              return [
+                `{a|${format_with_regex(params.value)}} {b|${params.seriesName}}`
+              ];
+            }
+          },
+          rich: {
+            a: {
+              fontWeight: "bold",
+              fontSize: 14,
+              color: "#333",
+              marginRight: 10
+            },
+            b: {
+              fontSize: 12,
+              color: "#333"
+            }
+          }
+        }
+      });
+    }
+  });
+  return bar;
+};