Liquid.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  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. <script>
  49. export default {
  50. name: 'Liquid',
  51. props: {
  52. height: {
  53. type: Number,
  54. default: 0
  55. },
  56. width: {
  57. type: Number,
  58. default: 0
  59. }
  60. }
  61. }
  62. </script>
  63. <style scoped>
  64. </style>