- <template>
- <div class="facility_storage_capacity_p">
- <pieChart
- :echartData="echartData"
- ref="barChartRef"
- :legend="{ show: false }"
- :radius="props.radius"
- v-if="echartData.length"
- />
- <div class="total" v-if="echartData.length">
- <div class="total_txt">设施调蓄量</div>
- <div class="total_val"><span class="val">{{ facilityStorageCapacity || 0 }}</span>m³</div>
- </div>
- </div>
- </template>
-
- <script setup>
- import { } from 'vue'
- import pieChart from '@/components/Echarts/pieChart.vue'
- const props = defineProps({
- radius: {
- type: [Array, String],
- default: ["40%", "70%"]
- },
- data: {
- type: Array,
- default: () => ([])
- },
- facilityStorageCapacity: {
- type: String,
- default: ''
- }
- })
- const echartData = props.data.map(item => ({
- name: item.name,
- value: item.value * 1
- }))
- </script>
-
- <style lang="scss" scoped>
- .facility_storage_capacity_p {
- height: 300px;
- position: relative;
- .total {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- .total_txt {
- font-size: 16px;
- }
- .total_val {
- margin-top: 6px;
- font-size: 18px;
- .val {
- font-size: 22px;
- }
- }
- }
- }
- </style>