ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add showValue configuration

This commit is contained in:
jiaming743 2020-05-06 14:13:49 +08:00
parent 22c88c4ea5
commit eb78915c93
1 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/capsuleChart/src/main.vue
View File

@ -9,13 +9,13 @@
<div class="capsule-container"> <div class="capsule-container">
<div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index"> <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
<div <div
class="capsule-item-column"
:style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`" :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
> >
<span <div
v-if="mergedConfig.showVal" v-if="mergedConfig.showValue"
class="capsule-item-val" class="capsule-item-value"
:style="`right:-${`${capsuleValue[index]}`.length * 7}px`" >{{ capsuleValue[index] }}</div>
>{{ capsuleValue[index] }}</span>
</div> </div>
</div> </div>
@ -23,7 +23,6 @@
<div <div
v-for="(label, index) in labelData" v-for="(label, index) in labelData"
:key="label + index" :key="label + index"
:style="calcUnitLabelStyle(index)"
>{{ label }}</div> >{{ label }}</div>
</div> </div>
</div> </div>
@ -77,7 +76,12 @@ export default {
* @default unit = '' * @default unit = ''
*/ */
unit: '', unit: '',
showVal: false /**
* @description Show item value
* @type {Boolean}
* @default showValue = false
*/
showValue: false
}, },
mergedConfig: null, mergedConfig: null,
@ -135,15 +139,6 @@ export default {
this.labelDataLength = Array.from(labelData).map(v => this.labelDataLength = Array.from(labelData).map(v =>
maxValue ? v / maxValue : 0 maxValue ? v / maxValue : 0
) )
},
/**
* 计算x轴label位置
*/
calcUnitLabelStyle(index) {
if (this.labelData.length - 1 === index) {
return `right: 0;`
}
return `left: ${this.labelDataLength[index] * 100}%;`
} }
}, },
mounted() { mounted() {
@ -191,17 +186,19 @@ export default {
margin: 5px 0px; margin: 5px 0px;
border-radius: 5px; border-radius: 5px;
div { .capsule-item-column {
position: relative; position: relative;
height: 8px; height: 8px;
margin-top: 1px; margin-top: 1px;
border-radius: 5px; border-radius: 5px;
transition: all 0.3s; transition: all 0.3s;
display: flex;
justify-content: flex-end;
align-items: center;
.capsule-item-val { .capsule-item-value {
position: absolute;
top: -5px;
font-size: 12px; font-size: 12px;
transform: translateX(100%);
} }
} }
} }
@ -210,14 +207,9 @@ export default {
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
display: flex;
&:not(:first-child) { justify-content: space-between;
text-align: right; align-items: center;
}
div {
position: absolute;
}
} }
.unit-text { .unit-text {