inleft
2022-03-02 34223b096cf6ad9d92c3702bb9529e764f523b11
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>