gx

src/view/echarts/pie3d.vue

@@ -14,33 +14,25 @@ const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 2
 
 const pieData = [
     {
-        name: "A", //名称
+        name: "60-70岁", //名称
-        value: 10, //值
+        value: 1012431431, //值
     },
     {
-        name: "B",
+        name: "70-80岁",
-        value: 8,
+        value: 85425345,
     },
     {
-        name: "C",
+        name: "80-90岁",
-        value: 2,
+        value: 2543256,
     },
     {
-        name: "D",
+        name: "90-100岁",
-        value: 6,
+        value: 5432535,
     },
     {
-        name: "E",
+        name: "100岁以上",
-        value: 5,
+        value: 56,
-    },
+    }
-    {
-        name: "F",
-        value: 1,
-    },
-    {
-        name: "G",
-        value: 5
-    },
 ]
 
 const serData = pieData.map((dItem, index) => {
@@ -152,40 +144,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
     //         },
     //         z: function (u, v) {
-    //             return Math.cos(v) > 0 ? -4 : -4;
+    //             return Math.cos(v) > 0 ? -6 : -7;
-    //         },
-    //     },
-    // });
-    // series.push({
-    //     name: 'mouseoutSeries',
-    //     type: 'surface',
-    //     parametric: true,
-    //     wireframe: {
-    //         show: false,
-    //     },
-    //     itemStyle: {
-    //         opacity: 0.5,
-    //         color: '#fff',
-    //     },
-    //     parametricEquation: {
-    //         u: {
-    //             min: 0,
-    //             max: Math.PI * 2,
-    //             step: Math.PI / 20,
-    //         },
-    //         v: {
-    //             min: 1.5,
-    //             max: 3,
-    //             step: Math.PI / 20,
-    //         },
-    //         x: function (u, v) {
-    //             return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) *1;
-    //         },
-    //         y: function (u, v) {
-    //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI)*1;
-    //         },
-    //         z: function (u, v) {
-    //             return Math.cos(v) > 0 ? -4 : -4;
     //         },
     //     },
     // });
@@ -206,19 +165,19 @@ function getPie3D(pieData, internalDiameterRatio) {
                 "#F4BB29",
                 "#49C384",
             ],
-            width: '30%',
+            width: '40%',
             //图例列表的布局朝向。
-            // orient: "vertical",
+            orient: "vertical",
-            right: 0,
+            right: 20,
             // bottom: 20,
             top: 'center',
             // left: '10px',
             //图例文字每项之间的间隔
-            itemGap: 20,
+            itemGap: 10,
             show: true,
             icon: "rect",
             itemHeight: 10,
-            itemWidth: 10,
+            itemWidth: 25,
             textStyle: {
                 //图例字体大小
                 fontSize: 14,
@@ -227,15 +186,21 @@ function getPie3D(pieData, internalDiameterRatio) {
             },
 
             //格式化图例文本
-            // formatter: function (name) {
+            formatter: function (name) {
-            //     var target;
+                var target;
-            //     for (var i = 0, l = pieData.length; i < l; i++) {
+                for (var i = 0, l = pieData.length; i < l; i++) {
-            //         if (pieData[i].name == name) {
+                    if (pieData[i].name == name) {
-            //             target = pieData[i].value;
+                        target = pieData[i].value;
-            //         }
+                    }
-            //     }
+                }
-            //     return `${name}   ${target}`;
+                if(name == '90-100岁'){
-            // },
+                    return `   ${name}           ${target} 人`;
+                }else if(name == '100岁以上'){
+                    return `   ${name}          ${target} 人`;
+                }else{
+                    return `   ${name}             ${target} 人`;
+                }
+            },
         },
         //移动上去提示的文本内容
         tooltip: {
@@ -256,7 +221,7 @@ function getPie3D(pieData, internalDiameterRatio) {
                         `<div style='color:rgba(214, 243, 255, 0.9);'>` +
                         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                         `${params.seriesName}<br/>` +
-                        `<span style='margin-right:20px'>${value}</span>` +
+                        `<span style='margin-right:20px'>${value}人</span>` +
                         `<span >${bfb}%</span>` +
                         `</div>`
                     );
@@ -269,14 +234,14 @@ function getPie3D(pieData, internalDiameterRatio) {
         grid3D: {
             viewControl: {
                 autoRotate: true,
-                rotateSensitivity: 1, //设置为0无法旋转
+                rotateSensitivity: 0, //设置为0无法旋转
-                zoomSensitivity: 1, //设置为0无法缩放
+                zoomSensitivity: 0, //设置为0无法缩放
                 panSensitivity: 0, //设置为0无法平移
                 alpha: 25, //角度(这个很重要 调节角度的)
-                distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+                distance: 90, //调整视角到主体的距离，类似调整zoom(这是整体大小)
             },
-            top: '0',
+            top: '-30',
-            left: '-100',
+            left: '-120',
             width: '100%',
             show: false,
             boxHeight: 20,

src/view/yl.vue

@@ -4,14 +4,8 @@
       <div class="flex1">
         <div class="yd_title left_1">
           <span class="text">
-            <img
+            <img src="@/assets/images/ylbx_1.png" style="width: 130px; height: 30px" />
-              src="@/assets/images/ylbx_1.png"
+            <img src="@/assets/images/ylbx_2.png" style="width: 130px; height: 30px" />
-              style="width: 130px; height: 30px"
-            />
-            <img
-              src="@/assets/images/ylbx_2.png"
-              style="width: 130px; height: 30px"
-            />
           </span>
         </div>
         <ePie></ePie>
@@ -31,10 +25,15 @@
     </div>
     <div class="displayFlex">
       <div class="flex1">
-        <div class="yd_title">
+        <div class="yd_title center_1">
-          <span class="text">活动数据分析</span>
+        </div>
+        <div class="minTopPart">
+          <div class="mtpImg1"></div>
+          <div class="mtpImg2"></div>
+          <div class="mtpImg3"></div>
+          <div class="mtpText1">5888811</div>
+          <div class="mtpText2">18%</div>
         </div>
-        <waterBall></waterBall>
         <ePie3d></ePie3d>
       </div>
       <div class="flex1">
@@ -131,11 +130,7 @@
             </div>
           </div>
           <div class="mealAssistance">
-            <img
+            <img class="mealAssistanceimg" src="@/assets/YLimg/ylimg7.png" alt="" />
-              class="mealAssistanceimg"
-              src="@/assets/YLimg/ylimg7.png"
-              alt=""
-            />
             <div style="width: 490px">
               <ylXZZC></ylXZZC>
             </div>
@@ -166,16 +161,19 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   flex-direction: column;
   flex: 1;
 }
+
 .flex1 {
   flex: 1;
   padding: 0 28px;
   box-sizing: border-box;
 }
+
 .flex2 {
   // flex: 1;
   padding: 0 38px;
   box-sizing: border-box;
 }
+
 .module {
   display: flex;
 }
@@ -188,6 +186,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   width: 100%;
   height: 36px;
   position: relative;
+
   .text {
     display: flex;
     position: absolute;
@@ -200,15 +199,19 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     top: 3px;
   }
 }
+
 .familyPlanning {
   background-image: url(@/assets/YLTitle/titleImg9.png);
 }
+
 .mechanism {
   background-image: url(@/assets/YLTitle/titleImg10.png);
 }
+
 .service {
   background-image: url(@/assets/YLTitle/titleImg11.png);
 }
+
 .serviceBox {
   display: flex;
   flex-direction: column;
@@ -217,13 +220,16 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     width: 182px;
     height: 35px;
   }
+
   .serviceTop {
     display: flex;
     justify-content: space-between;
+
     .medicalService {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .ylimg {
         width: 205px;
         height: 239px;
@@ -231,6 +237,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
 
       .medicalServiceTop {
         position: relative;
+
         span {
           position: absolute;
           left: 38px;
@@ -247,11 +254,13 @@ import ylXZZC from "./echarts/ylXZZC.vue";
       }
     }
   }
+
   .mealAssistance {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     .mealAssistanceimg {
       width: 495px;
       height: 35px;
@@ -264,16 +273,25 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_2 {
   background-image: url(@/assets/images/gllrbt.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_3 {
   background-image: url(@/assets/images/tkjz.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
+.center_1 {
+  background-image: url(@/assets/YLTitle/titleImg8.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
 .text_1_left {
   //   background-image: url(@/assets/images/ylbx_1.png);
   // background-repeat: no-repeat;
@@ -281,11 +299,13 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   width: 100px;
   height: 50px;
 }
+
 .basicInformation {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding-top: 22px;
+
   .basicInformation_item {
     flex: 0 0 50%;
     padding: 0 2px;
@@ -294,10 +314,12 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     box-sizing: border-box;
     display: flex;
     align-items: center;
+
     .icon {
       width: 79px;
       height: 47px;
     }
+
     .right {
       margin-left: 4px;
 
@@ -307,6 +329,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
         background-repeat: no-repeat;
         background-position: bottom;
         margin-bottom: 4px;
+
         span {
           font-size: 12px;
           font-weight: 400;
@@ -315,6 +338,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
           margin-left: 2px;
         }
       }
+
       p {
         font-size: 16px;
         font-weight: bold;
@@ -334,12 +358,15 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     margin-top: 16px;
     padding: 15px 8px;
     box-sizing: border-box;
+
     img {
       display: inline-block;
       margin-right: 10px;
     }
+
     .visitLog_item_box {
       flex: auto;
+
       h4 {
         font-size: 18px;
         font-family: MicrosoftYaHei;
@@ -347,6 +374,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
         color: #0096ff;
         margin-bottom: 2px;
       }
+
       p {
         font-size: 12px;
         font-family: SourceHanSansCN;
@@ -355,6 +383,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
         margin-top: 6px;
       }
     }
+
     .check {
       font-size: 12px;
       font-family: SourceHanSansCN;
@@ -368,6 +397,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
 .history {
   padding-top: 12px;
   display: flex;
+
   .history1 {
     font-size: 26px;
     color: #ffffff;
@@ -380,6 +410,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .unit {
       font-weight: 500;
       font-size: 14px;
@@ -389,15 +420,18 @@ import ylXZZC from "./echarts/ylXZZC.vue";
       font-style: normal;
       font-family: PingFangSC, PingFang SC;
     }
+
     .historyimg {
       width: 182px;
       height: 35px;
     }
   }
+
   img {
     width: 154px;
     height: 136px;
   }
+
   p {
     margin-top: 12px;
     font-size: 12px;
@@ -413,6 +447,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   align-items: center;
   justify-content: center;
   margin: 12px 0 20px;
+
   span {
     text-align: center;
     background: rgba(0, 89, 130, 0.73);
@@ -426,9 +461,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     margin: 0 10px;
   }
 }
+
 .property {
   display: flex;
   padding: 14px 0 10px;
+
   .property_box {
     background-image: url(@/assets/img_05.png);
     background-size: 100% 100%;
@@ -437,12 +474,14 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     height: 91px;
     margin: 0 12px;
     text-align: center;
+
     h5 {
       font-size: 14px;
       font-weight: 400;
       color: #ffffff;
       margin: 9px 0 16px;
     }
+
     p {
       font-size: 21px;
       font-weight: bold;
@@ -450,6 +489,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     }
   }
 }
+
 .activity {
   h5 {
     font-size: 14px;
@@ -459,9 +499,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     border-bottom: 2px solid rgba(0, 164, 250, 1);
     margin-bottom: 17px;
   }
+
   .activity_content {
     margin: 0 -6px 12px;
     display: flex;
+
     .activity_box {
       width: 50%;
       display: inline-block;
@@ -469,6 +511,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
       box-sizing: border-box;
       background-color: rgba(15, 28, 54, 1);
       padding: 12px 12px 19px;
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -479,26 +522,31 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     }
   }
 }
+
 .monitor {
   .monitor_box {
     display: flex;
     padding: 8px 0;
     border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
     img {
       width: 115px;
       height: 84px;
       margin-right: 21px;
     }
+
     .monitor_box_text {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+
       h4 {
         font-size: 14px;
         font-weight: 400;
         color: #ffffff;
         line-height: 20px;
       }
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -508,4 +556,71 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     }
   }
 }
+
+.minTopPart {
+  width: 530px;
+  height: 174px;
+  background-image: url(@/assets/minTopBg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 4px auto;
+  position: relative;
+
+  .mtpImg1 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop1.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    left: 23px;
+  }
+
+  .mtpImg2 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    right: 23px;
+  }
+  .mtpImg3 {
+    width: 125px;
+    height: 36px;
+    background-image: url(@/assets/minTop3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 316px;
+    left: 84px;
+  }
+
+  .mtpText1 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    left: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #FFFFFF;
+  }
+  .mtpText2 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    right: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #FFFFFF;
+  }
+}
 </style>