| commit | author | age | ||
| 9bcb19 | 1 | <template> |
| I | 2 | <div> |
| 3 | <v-chart | |
| 4 | :forceFit="true" | |
| 5 | :height="height" | |
| 6 | :width="width" | |
| 7 | :data="data" | |
| 8 | :scale="scale" | |
| 9 | :padding="0"> | |
| 10 | <v-tooltip /> | |
| 11 | <v-interval | |
| 12 | :shape="['liquid-fill-gauge']" | |
| 13 | position="transfer*value" | |
| 14 | color="" | |
| 15 | :v-style="{ | |
| 16 | lineWidth: 10, | |
| 17 | opacity: 0.75 | |
| 18 | }" | |
| 19 | :tooltip="[ | |
| 20 | 'transfer*value', | |
| 21 | (transfer, value) => { | |
| 22 | return { | |
| 23 | name: transfer, | |
| 24 | value, | |
| 25 | }; | |
| 26 | }, | |
| 27 | ]" | |
| 28 | ></v-interval> | |
| 29 | <v-guide | |
| 30 | v-for="(row, index) in data" | |
| 31 | :key="index" | |
| 32 | type="text" | |
| 33 | :top="true" | |
| 34 | :position="{ | |
| 35 | gender: row.transfer, | |
| 36 | value: 45 | |
| 37 | }" | |
| 38 | :content="row.value + '%'" | |
| 39 | :v-style="{ | |
| 40 | fontSize: 100, | |
| 41 | textAlign: 'center', | |
| 42 | opacity: 0.75, | |
| 43 | }" | |
| 44 | /> | |
| 45 | </v-chart> | |
| 46 | </div> | |
| 47 | </template> | |
| 48 | ||
| 49 | <script> | |
| 50 | export default { | |
| 51 | name: 'Liquid', | |
| 52 | props: { | |
| 53 | height: { | |
| 54 | type: Number, | |
| 55 | default: 0 | |
| 56 | }, | |
| 57 | width: { | |
| 58 | type: Number, | |
| 59 | default: 0 | |
| 60 | } | |
| 61 | } | |
| 62 | } | |
| 63 | </script> | |
| 64 | ||
| 65 | <style scoped> | |
| 66 | ||
| 67 | </style> | |
