diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue index 2d163c14c7acba1ebb3aed485f840efb9d7097c4..60695cbb533972850e7c23ea5cbb9f276b7b822f 100644 --- a/src/pages/data-analysis/my-service.vue +++ b/src/pages/data-analysis/my-service.vue @@ -70,12 +70,39 @@

搜索用户数

+

+ {{sparkline1.num}} + {{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}% +

+ + + +

搜索用户数

+

+ {{sparkline2.num}} + {{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}% +

+ + +
@@ -215,6 +242,30 @@ export default { { name: "通用应用", value: 0 }, { name: "业务应用", value: 2 } ], + 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 + }, text: "应用总数", single_data: { num: 12, @@ -602,12 +653,35 @@ export default { } .hot-line-chart { height: calc(100% - 36px); - background-color: pink; + position: relative; +} +.sparkline-text{ + width: 100%; +} +.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; } .topology { width: 100%; height: calc(100% - 20px); } +