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

update lib

This commit is contained in:
jiaming743 2019-08-30 09:44:38 +08:00
parent 24a0c8a9e8
commit 54bc52c1bf
2 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/components/capsuleChart/src/main.css
View File

@ -38,18 +38,18 @@
transition: all 0.3s; transition: all 0.3s;
} }
.capsule-chart .unit-label { .capsule-chart .unit-label {
display: flex; height: 20px;
flex-direction: row;
line-height: 20px;
font-size: 12px; font-size: 12px;
}
.capsule-chart .unit-text {
width: 30px;
text-align: right;
}
.capsule-chart .unit-container {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.capsule-chart .unit-text {
text-align: right;
display: flex;
align-items: flex-end;
font-size: 12px;
line-height: 20px;
margin-left: 10px;
}

6
lib/components/capsuleChart/src/main.vue
View File

@ -11,18 +11,16 @@
class="capsule-item" class="capsule-item"
v-for="(capsule, index) in capsuleLength" v-for="(capsule, index) in capsuleLength"
:key="index" :key="index"
:style="`width: calc(100% - ${mergedConfig.unit ? 30 : 0}px)`"
> >
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div> <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
</div> </div>
<div class="unit-label"> <div class="unit-label">
<div class="unit-container">
<div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div> <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
</div> </div>
</div>
<div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div> <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
</div>
</div>
</template> </template>
</div> </div>
</template> </template>