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