68 lines
1.2 KiB
Vue
68 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<v-chart
|
|
:forceFit="true"
|
|
:height="height"
|
|
:width="width"
|
|
:data="data"
|
|
:scale="scale"
|
|
:padding="0">
|
|
<v-tooltip />
|
|
<v-interval
|
|
:shape="['liquid-fill-gauge']"
|
|
position="transfer*value"
|
|
color=""
|
|
:v-style="{
|
|
lineWidth: 10,
|
|
opacity: 0.75
|
|
}"
|
|
:tooltip="[
|
|
'transfer*value',
|
|
(transfer, value) => {
|
|
return {
|
|
name: transfer,
|
|
value,
|
|
};
|
|
},
|
|
]"
|
|
></v-interval>
|
|
<v-guide
|
|
v-for="(row, index) in data"
|
|
:key="index"
|
|
type="text"
|
|
:top="true"
|
|
:position="{
|
|
gender: row.transfer,
|
|
value: 45
|
|
}"
|
|
:content="row.value + '%'"
|
|
:v-style="{
|
|
fontSize: 100,
|
|
textAlign: 'center',
|
|
opacity: 0.75,
|
|
}"
|
|
/>
|
|
</v-chart>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Liquid',
|
|
props: {
|
|
height: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|