12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <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>
|