From 1c432ff8b13bd431e8560d12f601b57a59bfa74f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Thu, 4 Aug 2022 10:10:14 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92):=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{jChart/pie => components}/progress.vue   |  0
 .../projectHuScreen/jChart/bar/JBarChart.vue  |  1 +
 .../{problemChart.vue => JProblemChart.vue}   |  0
 .../planProgress/centerBottom.vue             |  2 +-
 .../planProgress/leftBottom.vue               |  6 +--
 .../planProgress/leftCenter.vue               | 42 +++++++++++++++++--
 .../projectHuli/constructProgress.vue         |  2 +-
 .../projectHuli/qualityProblem.vue            |  2 +-
 8 files changed, 46 insertions(+), 9 deletions(-)
 rename src/views/projectAdmin/dataBoard/projectHuScreen/{jChart/pie => components}/progress.vue (100%)
 rename src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/{problemChart.vue => JProblemChart.vue} (100%)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/components/progress.vue
similarity index 100%
rename from src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue
rename to src/views/projectAdmin/dataBoard/projectHuScreen/components/progress.vue
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
index ad0d1a73..b674067c 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
@@ -80,6 +80,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          splitNumber: 4,
           splitLine: {
             show: true,
             lineStyle: {
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/problemChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
similarity index 100%
rename from src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/problemChart.vue
rename to src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
index 040961fa..bb8de9f2 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import conProgress from '../jChart/pie/progress.vue'
+import conProgress from '../components/progress.vue'
 export default {
   components:{conProgress},
   props: {
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
index 7938cc91..1557f782 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
@@ -4,7 +4,7 @@
     <div class="titleTxt">{{ title }}</div>
     <div class="myChart">
       <problemChart 
-      :title="{ text: 654, subTitle: '本周总任务' }" 
+      :title="{ text: 654, subTitle: '本周总任务' ,y:'35%'}" 
       :color="['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']"
       :data="[
             { value: 45, name: '未开始' },
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import problemChart from '../jChart/pie/problemChart.vue'
+import problemChart from '../jChart/pie/JProblemChart'
 export default {
 components:{problemChart},
   props: {
@@ -51,7 +51,7 @@ components:{problemChart},
   }
   .myChart{
     width: 100%;
-    height: 100%;
+    height: 90%;
   }
 }
 </style>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftCenter.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftCenter.vue
index 23eb5562..02179d5e 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftCenter.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftCenter.vue
@@ -1,13 +1,18 @@
 <template>
 <!-- 状态统计 -->
-<div class="container">
+<div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
+    <div class="mychart">
+      <JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid" :title="{ text: '全部' }" />
+    </div>
 
 </div>
 </template>
 
 <script>
+import JBarChart from '../jChart/bar/JBarChart.vue'
 export default {
+  components: { JBarChart },
 
   props: {
     title: {
@@ -17,7 +22,34 @@ export default {
   },
   data() {
     return {
-
+      xData:['未开始','进行中','已完成','延期'],
+      yData:[
+        {
+          value: 170,
+          itemStyle: {
+            color: '#a9adb6'
+          }
+        },
+        {
+          value: 320,
+          itemStyle: {
+            color: '#557dee'
+          }
+        },
+        {
+          value: 270,
+          itemStyle: {
+            color: '#43d7b5'
+          }
+        },
+        {
+          value: 310,
+          itemStyle: {
+            color: '#ff6c7f'
+          }
+        }],
+      color:['#a9adb6','#557dee','#43d7b5','#ff6c7f'],
+      grid:['10%','5%','7%','5%']
     };
   },
 
@@ -26,7 +58,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +69,10 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .mychart{
+    width: 100%;
+    height: 95%;
+  }
 }
 </style>
 
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
index 83610f0e..876b4c46 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import conProgress from '../jChart/pie/progress.vue'
+import conProgress from '../components/progress.vue'
 export default {
   components:{conProgress},
   data() {
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
index a415e98a..6bc8e5e1 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import problemChart from '../jChart/pie/problemChart.vue'
+import problemChart from '../jChart/pie/JProblemChart'
 export default {
   components:{problemChart},
   props: {

From 10e5928528b8466930a8ca7fdf5bf14f801d3e37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Thu, 4 Aug 2022 11:37:11 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E5=8A=B3=E5=8A=A1=E7=AE=A1=E7=90=86):=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E7=B1=BB=E5=88=AB=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/laborManage/leftTop.vue   | 99 ++++++++++++++++---
 1 file changed, 86 insertions(+), 13 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftTop.vue
index e4c4576d..bcaa6943 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftTop.vue
@@ -1,14 +1,42 @@
 <template>
-<!-- 人员类别 -->
-<div class="container">
+  <!-- 人员类别 -->
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
-</div>
+    <div class="personCount">
+      <div class="countItem">
+        <img src="@/assets/images/dataBoard/numImg_purple.png" />
+        <div class="info">
+          <div class="num1">{{ 62590 }}</div>
+          <!-- 实名制人数 -->
+          <div class="label label1">{{ '在场总人数' }}</div>
+        </div>
+      </div>
+      <div class="countItem">
+        <img src="@/assets/images/dataBoard/numImg_orange.png" />
+        <div class="info">
+          <div class="num2">{{ 62590 }}</div>
+          <!-- 在场人数 -->
+          <div class="label">{{ '在场劳务人数' }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="persontype">
+        <span>项目管理人员</span>
+        <p class="person">679</p>
+        <span>特种作业人员</span>
+        <p class="person">679</p>
+    </div>
+    <div class="persontype">
+        <span>一般作业人员</span>
+        <p class="person">679</p>
+        <span>临时作业人员</span>
+        <p class="person">679</p>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-
   props: {
     title: {
       type: String,
@@ -16,17 +44,13 @@ export default {
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
-}
+    return {};
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +61,55 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .personCount {
+    display: flex;
+    margin-top: 30px;
+    margin-left: 30px;
+    margin-bottom: 30px;
+    .countItem {
+      flex: 1;
+      height: 35%;
+      display: flex;
+      img {
+        margin-right: 8px;
+      }
+      .info {
+        margin-top: 5px;
+        .num1 {
+          color: #309b8a;
+        }
+        .num2 {
+          color: #f7d400;
+        }
+        .label {
+          font-size: 12px;
+        }
+        .label1 {
+          width: 68px;
+        }
+      }
+    }
+  }
+  .persontype {
+    display: flex;
+    justify-content: center;
+    height: 38px;
+    line-height: 30px;
+    margin-bottom: 20px;
+    span{
+      font-size: 12px;
+      margin-right: 10px;
+    }
+    .person {
+      width: 15%;
+      text-align: center;
+      margin-right: 30px;
+      color: #47b1c4;
+      background-image: url(~@/assets/images/projectImg/numBgc.png);
+      background-size:100%;
+      background-repeat: no-repeat;
+    }
+  }
 }
 </style>
 

From 9e985aa0b33aa5225a0673584bd9ed52c22672aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Thu, 4 Aug 2022 13:33:10 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E5=8A=B3=E5=8A=A1=E7=AE=A1=E7=90=86):=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E6=A6=82=E5=86=B5=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../laborManage/leftCenter.vue                | 91 ++++++++++++++++++-
 1 file changed, 88 insertions(+), 3 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftCenter.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftCenter.vue
index 74e6d586..b19c191f 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftCenter.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftCenter.vue
@@ -1,7 +1,54 @@
 <template>
 <!-- 人员概览 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
+<div class="containerBox">
+  <div class="titleTxt">{{ title }}</div>
+  <div class="personCount">
+        <div class="countItem">
+          <img src="@/assets/images/dataBoard/numImg_purple.png" />
+          <div class="info">
+            <div class="num1">
+              {{ '62,590' }}
+            </div>
+            <!-- 实名制人数 -->
+            <div class="label label1">
+              {{ '实名制人数' }}
+            </div>
+          </div>
+        </div>
+        <div class="countItem">
+          <img src="@/assets/images/dataBoard/numImg_orange.png" />
+          <div class="info">
+            <div class="num2">
+              {{ 62590 }}
+            </div>
+            <div class="label">
+              {{ '特殊工种人数' }}
+            </div>
+          </div>
+        </div>
+        <div class="countItem">
+          <img src="@/assets/images/dataBoard/numImg_orange.png" />
+          <div class="info">
+            <div class="num3">
+              {{ '89%'}}
+            </div>
+            <div class="label">
+              {{ '在职男女比例' }}
+            </div>
+          </div>
+        </div>
+        <div class="countItem">
+          <img src="@/assets/images/dataBoard/numImg_orange.png" />
+          <div class="info">
+            <div class="num4">
+              {{ 62590}}
+            </div>
+            <div class="label">
+              {{ '入场培训人数' }}
+            </div>
+          </div>
+        </div>
+      </div>
 
 </div>
 </template>
@@ -26,7 +73,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +84,44 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .personCount {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-top: 20px;
+      margin-left: 30px;
+      .countItem {
+        flex-shrink: 0;
+        height: 35%;
+        width:48%;
+        margin-top: 20px;
+        img {
+          margin-right: 8px;
+        }
+        .info{
+          display: inline-block;
+          line-height: 28px;
+            .num1{
+                color:#7851f6;
+            }
+            .num2{
+                color:#6ee4f0;
+            }
+            .num3{
+                color:#3d83f3;
+            }
+            .num4{
+              color: #7852f7;
+            }
+            .label{
+                font-size: 12px;
+            }
+            .label1{
+                width:68px;
+            }
+        }
+      }
+    }
 }
 </style>
 

From d805d3d522698fc7661aee554300b6e1d270e5f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Thu, 4 Aug 2022 15:24:38 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E5=8A=B3=E5=8A=A1=E7=AE=A1=E7=90=86):=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=89=E5=85=A8=E5=9F=B9=E8=AE=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../laborManage/leftBottom.vue                | 90 +++++++++++++++--
 .../laborManage/rightCenter.vue               | 97 +++++++++++++++----
 .../projectHuScreen/laborManage/rightTop.vue  | 70 ++++++++++---
 3 files changed, 216 insertions(+), 41 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftBottom.vue
index 90c9f507..131a6b5c 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftBottom.vue
@@ -1,13 +1,25 @@
 <template>
-<!-- 年龄结构 -->
-<div class="container">
+  <!-- 年龄结构 -->
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
-</div>
+    <div class="topTit">
+      <div class="blue"></div><span>在场</span>
+      <div class="purple"></div><span>在职</span>
+      <div class="topright">
+        <p>在职平均年龄： <a>42</a></p>
+        <p>在场平均年龄： <a>42</a></p>
+      </div>
+    </div>
+    <div class="mychart">
+      <JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid"  />
+    </div>
+  </div>
 </template>
 
 <script>
+import JBarChart from "../jChart/bar/JBarChart.vue";
 export default {
+  components: { JBarChart },
 
   props: {
     title: {
@@ -17,16 +29,42 @@ export default {
   },
   data() {
     return {
-
+      xData: ["18岁及下", "18-45岁", "45-59岁", "60岁以上"],
+      yData: [
+        {
+          value: 170,
+          itemStyle: {
+            color: "#a9adb6"
+          }
+        },
+        {
+          value: 320,
+          itemStyle: {
+            color: "#557dee"
+          }
+        },
+        {
+          value: 270,
+          itemStyle: {
+            color: "#43d7b5"
+          }
+        },
+        {
+          value: 310,
+          itemStyle: {
+            color: "#ff6c7f"
+          }
+        }
+      ],
+      color: ["#5be2f6", "#5281f7"],
+      grid: ["10%", "5%", "15%", "5%"]
     };
-  },
-
-
-}
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +75,38 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .topTit{
+     font-size: 12px;
+     color: #5d6674;
+    .blue , .purple{
+      display: inline-block;
+      width: 15px;
+      height: 5px;
+      border-radius: 10px;
+      margin-left: 30px;
+      margin-right: 5px;
+      background-color: #5be2f6;
+    }
+    .purple{
+      background-color: #5181f7;
+    }
+    // span{
+    //   margin-right: 30px;
+    //   height: 15px;
+    //   line-height: 15px;
+    // }
+  }
+  .topright{
+    display: inline-block;
+    p {
+      margin-left: 110px;
+    }
+  }
+  .mychart {
+    width: 100%;
+    height: 90%;
+  }
 }
 </style>
 
+
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightCenter.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightCenter.vue
index d5593f00..a7ec3e22 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightCenter.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightCenter.vue
@@ -1,42 +1,101 @@
 <template>
-<!-- 安全培训 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <!-- 安全培训 -->
+  <div class="containerBox">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <div class="chart">
+        <JRingChart
+          :title="{ text: 3214, subTitle: '总人数' }"
+          :color="['#557DEE', '#43D7B5']"
+          :data="[{ value: 2314 }, { value: 987 }]"
+          :radius="['55%', '80%']"
+        />
+      </div>
+      <div class="count">
+        <div class="count-item">
+          <div class="label">已培训人数</div>
+          <div class="num">2314</div>
+        </div>
+        <div class="count-item">
+          <div class="label">为培训人数</div>
+          <div class="num">987</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import JRingChart from '../jChart/pie/JRingChart.vue'
 export default {
-
+  components: { JRingChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
+    return {}
+  }
 }
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
-
-  .titleTxt {
+  .title {
+    padding-left: 6px;
+    height: 30px;
+    line-height: 30px;
     font-size: 18px;
     color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
+  }
+  .content {
+    height: calc(100% - 30px);
+    display: flex;
+    .chart {
+      width: 55%;
+      height: 100%;
+    }
+    .count {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .count-item {
+        position: relative;
+        &::before {
+          position: absolute;
+          left: -16px;
+          top: 10px;
+          content: '';
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+        }
+        &:first-child {
+          margin-bottom: 20px;
+        }
+        &:first-child::before {
+          background-color: #557dee;
+        }
+        &:last-child::before {
+          background-color: #43d7b5;
+        }
+        .label {
+          margin-bottom: 8px;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
+        }
+        .num {
+          font-size: 18px;
+        }
+      }
+    }
   }
 }
 </style>
-
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightTop.vue
index 762f2ecb..edc6d871 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightTop.vue
@@ -1,14 +1,14 @@
 <template>
-<!-- 人员类型 -->
-<div class="container">
+  <!-- 人员类型 -->
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
-</div>
+    <div class="myChart" ref="myChart"></div>
+  </div>
 </template>
 
 <script>
+import echarts from "echarts4";
 export default {
-
   props: {
     title: {
       type: String,
@@ -16,17 +16,59 @@ export default {
     }
   },
   data() {
-    return {
-
-    };
+    return {};
   },
-
-
-}
+  created() {
+    this.initMyChart();
+  },
+  methods: {
+    initMyChart() {
+      const myChart = echarts.init(this.$refs.myChart);
+      const option = {
+        series: [
+          {
+            type: "pie",
+            roseType: "radius",
+            radius: [30, 60],
+            // top: 50,
+            left: "center",
+            width: 350,
+            label: {
+              alignTo: "edge",
+              formatter: "{name|{b}}\n{time|{c} 人}",
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 12,
+                  color: "#999"
+                }
+              }
+            },
+            labelLine: {
+              length: 15,
+              length2: 0,
+              maxSurfaceAngle: 80
+            },
+            data: [
+              { name: "项目管理人员", value: 210 },
+              { name: "特种作业人员", value: 103 },
+              { name: "临时工", value: 52 },
+              { name: "外包工", value: 123 },
+              { name: "一般作用人员", value: 80 }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +79,10 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .myChart {
+    width: 100%;
+    height: 90%;
+  }
 }
 </style>