Skip to content

A
apaas-ui
Commit c2fc05e3 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

柱状图数据，仪表盘配色

parent 87cd7003
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 28 deletions
src/components/e-charts/bar-chart.vue
View file @ c2fc05e3
......@@ -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: {
......
src/components/e-charts/dashboard.vue
View file @ c2fc05e3
......@@ -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
}
])
}
......
src/components/service-list/commodity-card.vue
View file @ c2fc05e3
......@@ -2,7 +2,7 @@
<div class="com_card">
<div class="com_card_top">
<img
:src="cellData.cover"
:src="cellData.logo"
class="com_card_img"
/>
<div class="com_card_name_v">
......
src/components/service-list/service_list.vue
View file @ c2fc05e3
......@@ -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);
}
......
src/pages/data-analysis/my-service.vue
View file @ c2fc05e3
......@@ -11,8 +11,12 @@
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务总体概况" class="block">
<div class="left_1">
<div ref="left_1_l" class="left_1_l"></div>
<dashboard ref="left_1_r" class="left_1_r"></dashboard>
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<div class="left_1_title">服务总数</div>
<div class="left_1_num">2222</div>
</div>
<dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
</div>
</block-radius>
</el-col>
......@@ -82,7 +86,9 @@
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius class="block"></block-radius>
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
<block-radius class="block">
......@@ -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%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment