<template>
<div class="bar">
<div class="title">同比</div>
<div class="bar-area">
<div class="bar-area-lines">
<p v-for="(item, index) in 8" :key="index"></p>
</div>
<div class="bar-area-list">
<div :class="['bar-area-item', { 'bar-area-item-down': item.down }]" v-for="(item, index) in bars" :key="index" @click='goToDetailPage(index)'>
<div class="bar-small">
<div class="bar-small-value" :style="{height: item.height + '%'}">
<span>{{item.label}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="bar-x">
<div class="bar-x-item" v-for="(item, index) in barsX" :key="index" @click='goToDetailPage(index)'>
<div class="bar-x-item-name">{{item.name}}</div>
<div class="bar-x-item-ratio">{{item.ratio}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: {
// barsData: {
// type: Array,
// default() {
// return [];
// }
// },
barsXData: {
type: Array,
default() {
return [];
}
}
},
computed: {
bars() {
let data = [];
for (let i = 0; i < 5; i++) {
if (!data[i]) data.push({});
let item = this.barsXData[i];
if (item) {
// data[i].height = item.inc < 0 ? Math.abs(item.inc) : item.inc;
if (item.inc < 0) {
data[i].height = Math.abs(item.inc)
} else if (item.inc > 0 && item.inc < 100) {
data[i].height = item.inc
} else if (Math.abs(item.inc) >= 100) {
data[i].height = 100
}else if(item.inc == 0){
data[i].height = 0;
}
if (item.inc < 0) {
data[i].down = true;
data[i].label = ((item.inc) ? ((item.inc).toFixed(1)) : '0.0') + '%';
} else {
data[i].label = '+' + (item.inc ? ((item.inc).toFixed(1)) : '0.0') + '%';
data[i].down = false;
}
}
}
return data;
},
barsX() {
let data = [];
for (let i = 0; i < 5; i++) {
if (!data[i]) data.push({});
let item = this.barsXData[i];
if (item) {
data[i].name = item.name;
if (i < 3) {
data[i].ratio = item.ratio > 0 ? (((item.ratio * 100).toFixed(1)) + '%') : (('-' + ((item.ratio * 100).toFixed(1))) + '%');
} else if (i == 3) {
data[i].ratio = item.ratio ? ((item.ratio).toFixed(2)) : '0.00';
} else {
data[i].ratio = Math.round(item.ratio);
}
}
}
return data;
}
},
methods: {
goToDetailPage(index) {
this.$emit('goToDetailPage', index);
}
}
}
</script>
<style lang="less" scoped>
.bar {
width: 100%; // height: 4rem;
background-color: white;
position: relative;
.title {
padding-bottom: 0.16rem;
padding-left: .32rem;
font-size: .24rem;
color: rgba(0, 0, 0, .7);
}
.bar-area {
position: relative;
.bar-area-lines {
p {
height: .42rem;
border-top: 1px dashed rgba(0, 0, 0, .1);
&:nth-of-type(5) {
border-top: 1px dashed rgba(0, 0, 0, .4);
}
&:last-child {
border-bottom: 1px dashed rgba(0, 0, 0, .1);
}
}
}
.bar-area-list {
display: flex;
justify-content: space-between;
align-items: stretch;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 .5rem;
box-sizing: border-box;
.bar-area-item {
flex: 1;
background-color: rgba(238, 238, 238, .3);
position: relative;
&:nth-of-type(even) {
background-color: rgba(250, 250, 250, .2);
}
&.bar-area-item-down {
transform: rotate(180deg);
.bar-small {
.bar-small-value {
background-color: #85cc47;
span {
transform: translateX(-50%) rotate(180deg);
color: #85cc47;
}
}
}
}
.bar-small {
position: absolute;
bottom: 50%;
left: 50%;
transform: translateX(-50%);
width: .32rem;
height: 50%;
display: flex;
align-items: flex-end;
.bar-small-value {
position: relative;
width: 100%;
background-color: #f00;
span {
position: absolute;
top: -.33rem;
left: 50%;
transform: translateX(-50%);
color: #f00;
}
}
}
}
}
}
.bar-x {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .5rem;
box-sizing: border-box;
margin-top: .4rem;
.bar-x-item {
flex: 1;
text-align: center;
.bar-x-item-name {
width: .96rem;
line-height: .33rem;
font-size: .24rem;
color: rgba(0, 0, 0, .3);
}
.bar-x-item-ratio {
width: .96rem;
line-height: .33rem;
font-size: .24rem;
color: rgba(255, 98, 0, 1);
}
}
.bar-x-item:nth-child(5) {
.bar-x-item-name {
padding-bottom: .28rem;
}
}
} // .barLine {
.barLine {
width: 100%;
height: 3.36rem;
display: flex;
flex-direction: column;
justify-content: space-between;
li {
flex: 1;
width: 100%;
height: .42rem; //
border-top: 1px dashed rgba(0, 0, 0, .1); // border-left: 0;
// border-right: 0;
}
li:nth-of-type(5) {
border-top: 1px dashed rgba(0, 0, 0, .4); // border-left: 0;
}
li:last-child {
border-bottom: 1px dashed rgba(0, 0, 0, .1); // border-left: 0;
}
}
}
</style>