Newer
Older
KaiFengPC / src / views / preassess / components / facility_storage_capacity_p.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div class="facility_storage_capacity_p">
  3. <pieChart
  4. :echartData="echartData"
  5. ref="barChartRef"
  6. :legend="{ show: false }"
  7. :radius="props.radius"
  8. v-if="echartData.length"
  9. />
  10. <div class="total" v-if="echartData.length">
  11. <div class="total_txt">设施调蓄量</div>
  12. <div class="total_val"><span class="val">{{ facilityStorageCapacity || 0 }}</span></div>
  13. </div>
  14. </div>
  15. </template>
  16.  
  17. <script setup>
  18. import { } from 'vue'
  19. import pieChart from '@/components/Echarts/pieChart.vue'
  20. const props = defineProps({
  21. radius: {
  22. type: [Array, String],
  23. default: ["40%", "70%"]
  24. },
  25. data: {
  26. type: Array,
  27. default: () => ([])
  28. },
  29. facilityStorageCapacity: {
  30. type: String,
  31. default: ''
  32. }
  33. })
  34. const echartData = props.data.map(item => ({
  35. name: item.name,
  36. value: item.value * 1
  37. }))
  38. </script>
  39.  
  40. <style lang="scss" scoped>
  41. .facility_storage_capacity_p {
  42. height: 300px;
  43. position: relative;
  44. .total {
  45. position: absolute;
  46. left: 50%;
  47. top: 50%;
  48. transform: translate(-50%, -50%);
  49. text-align: center;
  50. .total_txt {
  51. font-size: 16px;
  52. }
  53. .total_val {
  54. margin-top: 6px;
  55. font-size: 18px;
  56. .val {
  57. font-size: 22px;
  58. }
  59. }
  60. }
  61. }
  62. </style>