应用数据分析图表

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>