数据分析图表

src/components/e-charts/multiple_circle.vue

@@ -72,7 +72,7 @@ export default {
             },
           },
           {
-            value: temp2_data / 20,
+            value: temp2_data / 30,
             name: "",
             itemStyle: placeHolderStyle,
           }

src/components/e-charts/single_circle.vue

@@ -26,14 +26,15 @@ export default {
           text: num + "%",
           textStyle: {
             color: "#000",
-            fontSize: 40,
+            fontSize: 26,
             fontWeight: 200,
           },
           subtext: text,
           subtextStyle: {
-            color: "#c9cedd",
+            color: "#707693",
+            fontSize: 12,
           },
-          itemGap: -10, // 主副标题距离
+          itemGap: 0, // 主副标题距离
           left: "center",
           top: "center",
         },
@@ -94,7 +95,7 @@ export default {
             ],
             coordinateSystem: "polar",
             roundCap: true,
-            barWidth: 10,
+            barWidth: 8,
             barGap: "-100%", // 两环重叠
 
             z: 2,
@@ -115,7 +116,7 @@ export default {
             ],
             coordinateSystem: "polar",
             roundCap: true,
-            barWidth: 10,
+            barWidth: 8,
             barGap: "-100%", // 两环重叠
             z: 1,
           },

src/pages/data-analysis/my-application.vue

@@ -174,7 +174,8 @@
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block" :show_header="true" title="应用在线状态统计">
-              <single-circle class="block-radius-content" :data="single_data"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
             </block-radius>
           </el-col>
         </el-row>
@@ -232,9 +233,14 @@ export default {
     ],
     text: "应用总数",
     single_data: {
-      num: 12,
-      color: "#515fe7",
-      text: "共享"
+      num: 60,
+      color: "#274fee",
+      text: "平台应用"
+    },
+    single_data1: {
+      num: 40,
+      color: "#e56600",
+      text: "开发者应用"
     },
     line_data: {
       xaxis: [
@@ -639,6 +645,10 @@ export default {
   height: calc(100% - 36px);
   background-color: pink;
 }
+.single-charts{
+  float: left;
+  width: 50%;
+}
 </style>
 
 <style>

src/pages/data-analysis/my-service.vue

@@ -74,7 +74,7 @@
                         <span>{{sparkline1.num}}</span>
                         <span :style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}% <img v-if="sparkline1.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt=""></span>
                       </p>
-                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="44">
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
                         <sparklineCurve
                           :refLineStyles="spRefLineStyles3"
                           :refLineType="false"
@@ -87,14 +87,14 @@
                     </div>
                   </div>
                   <div class="hot-line">
-                    <p class="hot-line-title">搜索用户数</p>
+                    <p class="hot-line-title">人均搜索次数</p>
                     <div class="hot-line-chart">
                       <!-- 折线图 -->
                       <p class="sparkline-text sparkline-text-user">
                         <span>{{sparkline2.num}}</span>
                         <span :style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}% <img v-if="sparkline2.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt=""></span>
                       </p>
-                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="44">
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
                         <sparklineCurve
                           :refLineStyles="spRefLineStyles3"
                           :refLineType="false"
@@ -167,7 +167,9 @@
               @changeButton="changeOpenessBtnindex"
               class="block"
             >
-              <single-circle class="block-radius-content" :data="single_data"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
+              <single-circle class="block-radius-content single-charts" :data="single_data2"></single-circle>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
@@ -268,10 +270,20 @@ export default {
     },
     text: "应用总数",
     single_data: {
-      num: 12,
-      color: "#515fe7",
+      num: 50,
+      color: "#25bdb1",
       text: "共享"
     },
+    single_data1: {
+      num: 30,
+      color: "#f5ab4c",
+      text: "受限"
+    },
+    single_data2: {
+      num: 20,
+      color: "#e15260",
+      text: "敏感"
+    },
     line_data: {
       xaxis: [
         "01-01",
@@ -281,20 +293,26 @@ export default {
         "01-05",
         "01-06",
         "01-07",
-        "01-08"
+        "01-08",
+        "01-09",
+        "01-10",
+        "01-11",
+        "01-12",
+        "01-13",
+        "01-14",
       ],
       data: [
         {
           name: "开发者应用",
-          arr: [100, 120, 130, 150, 160, 120, 110, 100]
+          arr: [10, 12, 13, 15, 16, 12, 11, 10,15,16,19,20,22,15,18]
         },
         {
           name: "平台应用",
-          arr: [120, 130, 140, 130, 140, 120, 100, 90]
+          arr: [12, 13, 14, 13, 14, 12, 10, 9,11,10,9,12,13,10,9]
         },
         {
           name: "未上架",
-          arr: [80, 90, 100, 110, 100, 70, 80, 90]
+          arr: [8, 9, 10, 11, 10, 7, 8, 9 ,7,6,5,8,6,7,5]
         }
       ]
     },
@@ -657,6 +675,7 @@ export default {
 }
 .sparkline-text{
   width: 100%;
+  line-height: 20px;
 }
 .sparkline-text span:nth-of-type(1){
   font-size: 20px;
@@ -681,6 +700,10 @@ export default {
   width: 100%;
   height: calc(100% - 20px);
 }
+.single-charts{
+  float: left;
+  width: 33.3%;
+}
 
 </style>