<template>
  <div class="facility_storage_capacity">
    <barChart
      :echartData="echartData"
      yAxisName="调蓄量/m3"
      ref="barChartRef"
      :legend="{ show: false }"
      :grid="{
        left: '3%',
        right: '7%',
        top: '15%',
        bottom: '3%',
        containLabel: true,
      }"
      v-if="echartData.xAxisData.length"
    />
  </div>
</template>

<script setup>
import {} from 'vue';
import barChart from '@/components/Echarts/barChart.vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const { data } = props;
const echartData = {
  xAxisData: data.map(item => item.name),
  seriesData: [
    {
      type: 'bar',
      name: '调蓄量',
      barWidth: 16,
      itemStyle: {
        color: '#73c0de',
      },
      label: {
        show: true,
        color: '#c6c6c6',
        position: 'top',
        distance: 0,
        fontWeight: 'bold',
      },
      data: data.map(item => item.value * 1),
    },
  ],
};
</script>

<style lang="scss" scoped>
.facility_storage_capacity {
  height: 300px;
}
</style>