Newer
Older
KaiFengPC / src / views / preassess / components / facility_storage_capacity.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div class="facility_storage_capacity">
  3. <barChart
  4. :echartData="echartData"
  5. yAxisName="调蓄量/m3"
  6. ref="barChartRef"
  7. :legend="{ show: false }"
  8. :grid="{
  9. left: '3%',
  10. right: '7%',
  11. top: '15%',
  12. bottom: '3%',
  13. containLabel: true,
  14. }"
  15. v-if="echartData.xAxisData.length"
  16. />
  17. </div>
  18. </template>
  19.  
  20. <script setup>
  21. import {} from 'vue';
  22. import barChart from '@/components/Echarts/barChart.vue';
  23. const props = defineProps({
  24. data: {
  25. type: Array,
  26. default: () => [],
  27. },
  28. });
  29. const { data } = props;
  30. const echartData = {
  31. xAxisData: data.map(item => item.name),
  32. seriesData: [
  33. {
  34. type: 'bar',
  35. name: '调蓄量',
  36. barWidth: 16,
  37. itemStyle: {
  38. color: '#73c0de',
  39. },
  40. label: {
  41. show: true,
  42. color: '#c6c6c6',
  43. position: 'top',
  44. distance: 0,
  45. fontWeight: 'bold',
  46. },
  47. data: data.map(item => item.value * 1),
  48. },
  49. ],
  50. };
  51. </script>
  52.  
  53. <style lang="scss" scoped>
  54. .facility_storage_capacity {
  55. height: 300px;
  56. }
  57. </style>