人力资源页

src/components/header.vue

@@ -107,7 +107,7 @@ export default {
   },
   mounted() {
     this.getTime();
-    this.carousel();
+    // this.carousel();
   },
   methods: {
     getTime: function () {

src/pages/humanResources/home.vue

@@ -20,12 +20,64 @@
 
       <!--员工年龄和学历占比(个)-->
       <dv-border-box-11 title="员工年龄和学历占比(%)" :color="['#16ADDE', '#0C7DE7']" :titleWidth="400" style="height: 40%;">
-
+        <div style="width: 100%;height:100%;display:flex;justify-content: center;align-items: center">
+          <img src="@/assets/img/humanResources/5.png" style="width: 50%;height: 90%">
+          <img src="@/assets/img/humanResources/6.png" style="width: 50%;height: 90%">
+        </div>
       </dv-border-box-11>
     </div>
     <div class="home_right">
-      <InnerBox :echartObj="echartObj5" header_title="当前员工男女和职称比例" little_font="（%）" style="height: 50%;" />
-      <InnerBox :echartObj="echartObj6" header_title="岗位分析" little_font="（人）" style="height: 50%;" />
+      <div class="inner_box" style="height: 49%">
+        <!-- 标题 -->
+        <div class="inner_header">
+          <div class="header_left"></div>
+          <div class="header_icon">
+            <div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
+            <div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
+          </div>
+          <div class="header_title">
+            <div>
+              <span>当前员工男女和职称比例</span>
+              <span class="little_font">(%)</span>
+            </div>
+          </div>
+        </div>
+        <!-- 内容-->
+        <div class="box_content" >
+        <div style="height: 50%;text-align: center">
+          <img src="@/assets/img/humanResources/7.png" style="width: 90%;height: 40%;margin-top: 3%">
+          <img src="@/assets/img/humanResources/8.png" style="width: 90%;height: 35%;margin-top: 5%">
+        </div>
+          <Echarts class="echarts" :echartObj="echartObj5" style="height: 50%;width: 100%"></Echarts>
+        </div>
+      </div>
+
+      <div class="inner_box" style="height: 49%">
+        <!-- 标题 -->
+        <div class="inner_header">
+          <div class="header_left"></div>
+          <div class="header_icon">
+            <div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
+            <div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
+          </div>
+          <div class="header_title">
+            <div>
+              <span>岗位分析</span>
+              <span class="little_font">(人)</span>
+            </div>
+          </div>
+        </div>
+        <!-- 内容-->
+        <div class="box_content" >
+          <div style="width: 100%;height: 50%;display: flex;justify-content: space-around">
+            <img src="@/assets/img/humanResources/9.png" style="width: 25%;height: 85%;margin-top: 5%">
+            <img src="@/assets/img/humanResources/10.png" style="width: 25%;height: 50%;margin-top: 5%">
+            <img src="@/assets/img/humanResources/11.png" style="width: 25%;height: 50%;margin-top: 5%">
+          </div>
+          <Echarts class="echarts" :echartObj="echartObj6" style="height: 50%;width: 100%"></Echarts>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
@@ -220,8 +272,135 @@ export default {
           },
         ]
       },
-      echartObj5: {},
-      echartObj6: {},
+      echartObj5: {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          right: '10',
+          top: 'center',
+          orient: 'vertical',
+          data: ['高级职称', '中级职称', '初级职称','其他'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter: (name) => {
+            let data = this.echartObj5.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100, 2) + '%'
+            return `${name}(${p})`
+          }
+        },
+        color: ['#4AA2CB','#91CC75','#68A400','#3D7DFA','#48E5E5','#FAC858'],
+        toolbox: {
+          show: false,
+          feature: {
+            mark: {show: true},
+            dataView: {show: true, readOnly: false},
+            magicType: {
+              show: true,
+              type: ['pie', 'funnel']
+            },
+            restore: {show: true},
+            saveAsImage: {show: true}
+          }
+        },
+        series: [
+          {
+            name: '占比分析',
+            type: 'pie',
+            radius: [60, 100],
+            top: 'middle',
+            label: {
+              show: false,
+              position: 'inside',
+              formatter: '{d}%',
+            },
+            data: [
+              {value: 30, name: '高级职称'},
+              {value: 40, name: '中级职称'},
+              {value: 20, name: '初级职称'},
+              {value: 10, name: '其他'},
+            ]
+          }
+        ]
+      },
+      echartObj6: {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          right: '10',
+          top: 'center',
+          orient: 'vertical',
+          data: ['护理长', '护理员', '生活管家','经理','会计','销售','客服'],
+          textStyle: {
+            color: '#FFFFFF',
+            lineHeight: 18
+          },
+          formatter: (name) => {
+            let data = this.echartObj6.series[0].data
+            let total = 0
+            let tarValue
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value
+              if (data[i].name == name) {
+                tarValue = data[i].value
+              }
+            }
+            //计算出百分比
+            let p = Math.round((tarValue / total) * 100, 2) + '%'
+            return `${name}(${p})`
+          }
+        },
+        color: ['#4AA2CB','#91CC75','#68A400','#3D7DFA','#48E5E5','#FAC858','#2B8EF3'],
+        toolbox: {
+          show: false,
+          feature: {
+            mark: {show: true},
+            dataView: {show: true, readOnly: false},
+            magicType: {
+              show: true,
+              type: ['pie', 'funnel']
+            },
+            restore: {show: true},
+            saveAsImage: {show: true}
+          }
+        },
+        series: [
+          {
+            name: '占比分析',
+            type: 'pie',
+            radius: [60, 100],
+            top: 'middle',
+            label: {
+              show: false,
+              position: 'inside',
+              formatter: '{d}%',
+            },
+            data: [
+              {value: 20, name: '护理长'},
+              {value: 25, name: '护理员'},
+              {value: 25, name: '生活管家'},
+              {value: 10, name: '经理'},
+              {value: 10, name: '会计'},
+              {value: 5, name: '销售'},
+              {value: 5, name: '客服'},
+            ]
+          }
+        ]
+      },
     }
   },
   created() {