<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>