From 978ac116c907d72e75cf3096383bc1932a91d076 Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Thu, 16 Jul 2020 18:18:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=95=B0=E6=8D=AE=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/data-analysis/my-application.vue | 76 +++++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/src/pages/data-analysis/my-application.vue b/src/pages/data-analysis/my-application.vue
index 81b05ca..7378c7b 100644
--- a/src/pages/data-analysis/my-application.vue
+++ b/src/pages/data-analysis/my-application.vue
@@ -100,12 +100,38 @@
                     <p class="hot-line-title">搜索用户数</p>
                     <div class="hot-line-chart">
                       <!-- 折线图 -->
+                      <p class="sparkline-text">
+                        <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="42">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline1.arr"
+                          :limit="sparkline1.arr.length"
+                          :styles="spCurveStyles2"
+                        />
+                      </sparkline>
                     </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="42">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline2.arr"
+                          :limit="sparkline2.arr.length"
+                          :styles="spCurveStyles3"
+                        />
+                      </sparkline>
                     </div>
                   </div>
                 </div>
@@ -232,6 +258,30 @@ export default {
       { name: "业务应用", value: 2 }
     ],
     text: "应用总数",
+    spIndicatorStyles1: false,
+    spRefLineStyles3: {
+      stroke: "#d14",
+      strokeOpacity: 0,
+      strokeDasharray: "2, 2",
+    },
+    spCurveStyles2: {
+      stroke: "#274fee",
+      fill: "#274fee",
+    },
+    spCurveStyles3: {
+      stroke: "#e56600",
+      fill: "#e56600",
+    },
+    sparkline1:{
+      arr:[1,2,3,4,8,9,10,21],
+      num:1231,
+      up:15.3
+    },
+    sparkline2:{
+      arr:[1,2,3,4,8,9,10,21],
+      num:182,
+      up:-19.3
+    },
     single_data: {
       num: 60,
       color: "#274fee",
@@ -643,12 +693,34 @@ export default {
 }
 .hot-line-chart {
   height: calc(100% - 36px);
-  background-color: pink;
 }
 .single-charts{
   float: left;
   width: 50%;
 }
+.sparkline-text{
+  width: 100%;
+  line-height: 20px;
+}
+.sparkline-text span:nth-of-type(1){
+  font-size: 20px;
+  color: #274fee;
+}
+.sparkline-text span:nth-of-type(2){
+  font-size: 12px;
+  width: 62px;
+  float: right;
+  text-align: center;
+  line-height: 20px;
+	height: 20px;
+  border-radius: 3px;
+  margin-top: 3px;
+  margin-right: 2px;
+}
+.sparkline-text-user span:nth-of-type(1){
+  font-size: 20px;
+  color: #e56600;
+}
 </style>
 
 <style>
-- 
2.26.0