修改bug
This commit is contained in:
@@ -13,10 +13,11 @@
|
||||
<!-- <div style="flex:1;padding: 0 20%;"> -->
|
||||
<div class="chart" ref="chart"></div>
|
||||
<!-- </div> -->
|
||||
<div class="legend" >
|
||||
<div class="legend">
|
||||
<div class="legend-item" v-for="lgd in legend" :key="lgd.label">
|
||||
<span class="legend-item__value">{{ lgd.value }}</span>
|
||||
<span class="legend-item__label">{{ lgd.label }}</span>
|
||||
<span class="legend-item__value">{{ lgd.value }}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -100,7 +101,7 @@ export default {
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日良率`, },
|
||||
{ label: `去年${month}月${today}日良率` },
|
||||
{ label: `${year-1}年${month}月${today}日良率` },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
@@ -110,7 +111,7 @@ export default {
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `本周良率`, },
|
||||
{ label: `去年本周良率` },
|
||||
{ label: `${year-1}年本周良率` },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
@@ -120,7 +121,7 @@ export default {
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月良率`, },
|
||||
{ label: `去年${month}月良率`, },
|
||||
{ label: `${year-1}年${month}月良率`, },
|
||||
{ label: `${month}月目标良率`, },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
@@ -143,7 +144,7 @@ export default {
|
||||
月: `${month}月良率`,
|
||||
年: `${year}良率`,
|
||||
}[this.period];
|
||||
|
||||
console.log(vt[1]);
|
||||
const t = getOptions({
|
||||
// single,
|
||||
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
|
||||
@@ -173,7 +174,7 @@ export default {
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
|
||||
{ label: `${year-1}年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
|
||||
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
@@ -183,7 +184,7 @@ export default {
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
|
||||
{ label: `${year-1}年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
|
||||
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||
|
||||
];
|
||||
@@ -194,24 +195,24 @@ export default {
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
|
||||
{ label: `${year-1}年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
|
||||
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||
|
||||
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
|
||||
{ label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
|
||||
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||
|
||||
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
|
||||
{ label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
|
||||
{ label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||
|
||||
{ label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
|
||||
{ label: `${year}年目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
|
||||
];
|
||||
}
|
||||
return items
|
||||
@@ -247,6 +248,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
formatNumber(num) {
|
||||
console.log(num);
|
||||
// 判断是否为整数
|
||||
if (Number.isInteger(num)) {
|
||||
return num; // 如果是整数,直接转换为字符串
|
||||
@@ -270,6 +272,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// padding: 0 3px;
|
||||
// justify-content: center;
|
||||
gap: 3px;
|
||||
backdrop-filter: blur(24px);
|
||||
@@ -281,7 +284,7 @@ export default {
|
||||
// margin-left: 5%;
|
||||
// width: 290px;
|
||||
flex: 1 1 auto;
|
||||
padding: 0 15%;
|
||||
padding: 0 20%;
|
||||
/* margin: 10%; */
|
||||
height: 16vh;
|
||||
/* min-width: 300px; */
|
||||
@@ -290,17 +293,24 @@ export default {
|
||||
.legend {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
justify-content: space-around;
|
||||
color: #fff;
|
||||
justify-content: flex-end;
|
||||
gap:20px;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
// .legend:nth-child(3){
|
||||
// margin-left: 30px;
|
||||
// }
|
||||
.legend-item {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 3px;
|
||||
|
||||
&:first-child {
|
||||
// margin-left: 5px;
|
||||
.legend-item__value {
|
||||
color: #0e61f5;
|
||||
}
|
||||
@@ -312,7 +322,40 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.legend-item__label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.legend-item__label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ccc;
|
||||
border-radius: 2px;
|
||||
top: 6px;
|
||||
left: -18px;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2) .legend-item__label::before {
|
||||
background: #12fff5;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2) .legend-item__value {
|
||||
color: #12fff5;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1) .legend-item__label::before {
|
||||
background: #0f65ff;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1) .legend-item__value {
|
||||
color: #0f65ff;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3) .legend-item__label::before {
|
||||
background: #003982;
|
||||
}
|
||||
.legend-item__value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
|
||||
Reference in New Issue
Block a user