服务单元分析coding...

src/utils/chart.js

@@ -8,7 +8,7 @@ const getTotal = (data) => {
 //mergeParams方法
 //调用生成对应图表的方法时，extend参数可以对本文件里的基础配置里的字段进行覆盖，
 //如果extend里的配置项里的字段为空，说明需要删除本文件里的配置项字段
-//例如 options为{ legend :{top:'center',right:'3%'} } , extend参数为 { legend: { top:'',right:'',bottom:'3%',left:'center' } }
+//例如 options为{ legend :{top:'center',right:'3%'} } , extend参数为 { legend: { top:null,right:null,bottom:'3%',left:'center' } }
 //那么合并后的结果对象就是  { legend: {bottom:'3%' ,left:'center' } }
 const mergeParams = (options, obj) => {
   let keys = Object.keys(obj);
@@ -17,7 +17,7 @@ const mergeParams = (options, obj) => {
     if (optionsSubObj) {
       let subObj = obj[key];
       Object.entries(subObj).forEach((arr) => {
-        if (!arr[1]) {
+        if (arr[1] === null) {
           delete optionsSubObj[arr[0]];
         } else {
           optionsSubObj[arr[0]] = arr[1];
@@ -166,6 +166,8 @@ export const createRingPieOption = (
         textStyle: {
           color: '#595959',
         },
+        itemWidth: 10,
+        itemHeight: 10,
         formatter: (name) => {
           let target = data.find((item) => item.name == name);
           let float = ((target.value * 100) / total).toFixed(1);
@@ -240,6 +242,8 @@ export const createCakePieOption = (
         textStyle: {
           color: '#8C8C8C',
         },
+        itemWidth: 10,
+        itemHeight: 10,
         // height: 150,
       },
       series: [

src/views/report/service-analysis/index.vue

@@ -51,10 +51,22 @@
               <span class="label">人力供应商项目角色人员分布</span>
             </div>
             <div class="box3 flex">
-              <div style="width: 220px; height: 100%">
+              <div style="width: 40%; height: 100%">
                 <my-chart :options="options3"></my-chart>
               </div>
-              <div style="width: calc(100% - 220px); height: 100%"></div>
+              <div class="gird3-others" style="width: 60%; height: 100%">
+                <div class="num-show flex items-center justify-around">
+                  <div class="desc">
+                    <div class="label">实施工程师(人)</div>
+                    <div class="value">172</div>
+                  </div>
+                  <div class="desc">
+                    <div class="label">区域协调人(人)</div>
+                    <div class="value">39</div>
+                  </div>
+                </div>
+                <div class="cover-range"></div>
+              </div>
             </div>
             <div></div>
           </div>
@@ -116,8 +128,8 @@ const options2 = createRingPieOption(
     legend: {
       type: 'scroll',
       orient: 'horizontal',
-      top: '',
-      right: '',
+      top: null,
+      right: null,
       bottom: '10%',
       left: 'center',
     },
@@ -131,10 +143,21 @@ const options3 = createCakePieOption(
       { name: '区域协调人', value: 39 },
     ],
     radius: [0, 50],
-    center: ['30%', '50%'],
+    center: ['50%', '50%'],
     seriesName: '角色分布',
   },
-  {}
+  {
+    legend: {
+      show: false,
+    },
+    // legend: {
+    //   orient: 'horizontal',
+    //   top: '',
+    //   right: '',
+    //   bottom: '1%',
+    //   left: 'center',
+    // },
+  }
 );
 </script>
 
@@ -147,6 +170,7 @@ const options3 = createCakePieOption(
     .scroll-content {
       height: 100%;
       min-height: 600px;
+      min-width: 1000px;
       display: flex;
       .title {
         height: 36px;
@@ -176,6 +200,24 @@ const options3 = createCakePieOption(
         margin-right: 15px;
         .box3 {
           height: calc(100% - 36px);
+          .gird3-others {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .num-show {
+              .desc {
+                .label {
+                  color: #8c8c8c;
+                  font-size: 12px;
+                }
+                .value {
+                  color: #165dff;
+                  font-size: 16px;
+                  font-weight: bold;
+                }
+              }
+            }
+          }
         }
       }
       .grid1-others {