80 lines
1.4 KiB
Java
80 lines
1.4 KiB
Java
<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: 8,
|
|
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>
|
|
|
|
const sourceDataConst = [
|
|
{ transfer: '一月', value: 813 },
|
|
{ transfer: '二月', value: 233 },
|
|
{ transfer: '三月', value: 561 }
|
|
]
|
|
|
|
export default {
|
|
name: 'Liquid',
|
|
props: {
|
|
height: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
data: sourceDataConst,
|
|
scale: []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |