From c2fc05e338dd4b4e9e7b99f7517f8810c13b0e02 Mon Sep 17 00:00:00 2001 From: liudianxin Date: Wed, 15 Jul 2020 11:41:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=EF=BC=8C=E4=BB=AA=E8=A1=A8=E7=9B=98=E9=85=8D=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/e-charts/bar-chart.vue | 22 ++++-- src/components/e-charts/dashboard.vue | 69 ++++++++++++++++--- .../service-list/commodity-card.vue | 2 +- src/components/service-list/service_list.vue | 8 +-- src/pages/data-analysis/my-service.vue | 55 ++++++++++++--- 5 files changed, 128 insertions(+), 28 deletions(-) diff --git a/src/components/e-charts/bar-chart.vue b/src/components/e-charts/bar-chart.vue index 9ee2a63..3f0f3bc 100644 --- a/src/components/e-charts/bar-chart.vue +++ b/src/components/e-charts/bar-chart.vue @@ -10,14 +10,15 @@ export default { type: Object, default: () => { return { - data: 40, - text: "模拟数据1.0" + xaxis: [], + data: [] + }; } }, bar_width: { type: String, - default: "16px" + default: "12px" }, colors: { type: Array, @@ -47,12 +48,23 @@ export default { xAxis: [ { type: "category", - data: ["2019Q1", "2019Q2", "2019Q3", "2019Q4"], + data: self.data.xaxis, axisLabel: { margin: 20, color: "#0d1847", textStyle: { fontSize: 12 + }, + interval: 0, + rotate: 30, + formatter: function(value) { + let valueTxt = ""; + if (value.length > 6) { + valueTxt = value.substring(0, 5) + "..."; + } else { + valueTxt = value; + } + return valueTxt; } }, axisLine: { @@ -100,7 +112,7 @@ export default { series: [ { type: "bar", - data: [40, 80, 20, 16], + data: self.data.data, barWidth: self.bar_width, itemStyle: { normal: { diff --git a/src/components/e-charts/dashboard.vue b/src/components/e-charts/dashboard.vue index 8b24401..e18ac05 100644 --- a/src/components/e-charts/dashboard.vue +++ b/src/components/e-charts/dashboard.vue @@ -10,14 +10,18 @@ export default { type: Object, default: () => { return { - data: 40, - text: "模拟数据1.0" + data: 0, + text: "" }; } }, dangerousValue: { type: String, default: "" + }, + is_word: { + type: Boolean, + default: false } }, data: () => ({ @@ -31,6 +35,7 @@ export default { title: [ { text: self.data.data + "{a|%}", + show: !self.is_word, x: "center", y: "center", textStyle: { @@ -47,6 +52,7 @@ export default { }, { text: self.data.text, + show: !self.is_word, x: "center", y: "58%", textStyle: { @@ -54,6 +60,53 @@ export default { fontWeight: "normal", color: "#707693" } + }, + { + text: self.data.text, + show: self.is_word, + x: "center", + y: "74%", + textStyle: { + fontSize: 14, + fontWeight: "normal", + color: "#8890a7" + } + }, + { + text: self.data.data + "%", + show: self.is_word, + x: "center", + y: "64%", + textStyle: { + fontSize: 20, + fontWeight: "normal", + color: "#242c43" + } + }, + { + text: + self.data.data > 75 + ? "优" + : self.data.data > 50 + ? "良" + : self.data.data > 25 + ? "中" + : "差", + show: self.is_word, + x: "center", + y: "40%", + textStyle: { + fontSize: 36, + fontWeight: "normal", + color: + self.data.data > 75 + ? "#00beb2" //green + : self.data.data > 50 + ? "#ff7200" //yellow + : self.data.data > 25 + ? "#da4251" //red + : "#da4251" //red + } } ], angleAxis: { @@ -110,12 +163,12 @@ export default { ? "#f7f1d5" : "#d5f7e8" : self.data.data > 75 - ? "f7f1d5" + ? "#d5f7e8" : self.data.data > 50 ? "#ffd98f" : self.data.data > 25 - ? "#d5f7e8" - : "#d5f7e8" + ? "#f7f1d5" + : "#f7f1d5" }, { offset: 1, @@ -125,12 +178,12 @@ export default { ? "#da4251" // red : "#00beb2" //green : self.data.data > 75 - ? "#da4251" //red + ? "#00beb2" //green : self.data.data > 50 ? "#ff7200" //yellow : self.data.data > 25 - ? "#00beb2" //green - : "#00beb2" //green + ? "#da4251" //red + : "#da4251" //red } ]) } diff --git a/src/components/service-list/commodity-card.vue b/src/components/service-list/commodity-card.vue index 2f26525..4db4fe9 100644 --- a/src/components/service-list/commodity-card.vue +++ b/src/components/service-list/commodity-card.vue @@ -2,7 +2,7 @@
diff --git a/src/components/service-list/service_list.vue b/src/components/service-list/service_list.vue index 01f774c..8d312b2 100644 --- a/src/components/service-list/service_list.vue +++ b/src/components/service-list/service_list.vue @@ -475,8 +475,8 @@ export default { getAppArea() { this.$api.serviceShop.getAppArea().then(response => { if (response.data.success == 1) { - this.filterLists[1].childDomains = response.data.data; - this.refresh_app_1 = true; + this.filterLists[2].childDomains = response.data.data; + this.refresh_app_2 = true; } else { console.log(response.data.errMsg); } @@ -485,8 +485,8 @@ export default { getAppType() { this.$api.serviceShop.getAppType().then(response => { if (response.data.success == 1) { - this.filterLists[2].childDomains = response.data.data; - this.refresh_app_2 = true; + this.filterLists[1].childDomains = response.data.data; + this.refresh_app_1 = true; } else { console.log(response.data.errMsg); } diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue index cc53a90..3c64394 100644 --- a/src/pages/data-analysis/my-service.vue +++ b/src/pages/data-analysis/my-service.vue @@ -11,8 +11,12 @@
-
- +
+ +
服务总数
+
2222
+
+
@@ -82,7 +86,9 @@ - + + + @@ -152,6 +158,10 @@ export default { } ] }, + das_data: { + data: 40, + text: "健康占比" + }, bar_data: { xaxis: [ "01-01", @@ -163,12 +173,20 @@ export default { "01-07", "01-08" ], - data: [ - { - name: "开发者应用", - arr: [100, 120, 130, 150, 160, 120, 110, 100] - } - ] + data: [100, 120, 130, 150, 160, 120, 110, 100] + }, + bar_data_org: { + xaxis: [ + "01-01", + "01-02", + "01-03", + "01-04", + "01-05", + "01-06", + "01-07", + "01-08" + ], + data: [100, 120, 130, 150, 160, 120, 110, 100] } }), mounted() {}, @@ -209,11 +227,28 @@ export default { .left_1 { height: 100%; display: flex; + justify-content: space-between; } .left_1_l { - width: 50%; + width: 40%; height: 100%; display: inline-block; + padding: 20px 0 0 0; +} +.left_1_title { + width: 100%; + text-align: center; +} +.left_1_num { + font-size: 32px; + color: #515fe7; + width: 100%; + text-align: center; +} +.left_1_img { + width: 120px; + display: block; + margin: 0 auto; } .left_1_r { width: 50%; -- 2.26.0