UtilizationTrend.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <div class="chart-container">
  3. <h3>设备月度利用率变化趋势</h3>
  4. <v-chart :option="chartOption" autoresize />
  5. </div>
  6. </template>
  7. <script setup lang="ts">
  8. import { ref, computed, onMounted } from 'vue'
  9. import { use } from 'echarts/core'
  10. import VChart from 'vue-echarts'
  11. import * as api from '../api';
  12. import {
  13. CanvasRenderer
  14. } from 'echarts/renderers'
  15. import {
  16. LineChart
  17. } from 'echarts/charts'
  18. import {
  19. TitleComponent,
  20. TooltipComponent,
  21. GridComponent,
  22. LegendComponent
  23. } from 'echarts/components'
  24. use([
  25. CanvasRenderer,
  26. LineChart,
  27. TitleComponent,
  28. TooltipComponent,
  29. GridComponent,
  30. LegendComponent
  31. ])
  32. interface MonthlyUtilization {
  33. month: string
  34. rate: number
  35. }
  36. const rawData = ref<MonthlyUtilization[]>([])
  37. const fetchData = async () => {
  38. const res = await api.GetUtilizationList()
  39. if (res.code === 2000) {
  40. rawData.value = res.data.monthly_utilization
  41. }
  42. }
  43. onMounted(fetchData)
  44. const chartOption = computed(() => {
  45. const months = rawData.value.map(item => item.month)
  46. const rates = rawData.value.map(item => item.rate)
  47. console.log("rates:::",rates);
  48. const diffs = rawData.value.map((item, index, arr) => {
  49. if (index === 0) return 0
  50. return +(item.rate - arr[index - 1].rate).toFixed(2)
  51. })
  52. return {
  53. title: {
  54. text: '设备利用率提升幅度',
  55. left: 'center'
  56. },
  57. tooltip: {
  58. trigger: 'axis',
  59. formatter: (params: any) => {
  60. const rate = params[0].data
  61. const diff = diffs[params[0].dataIndex]
  62. const sign = diff > 0 ? '+' : ''
  63. return `
  64. 月份:${params[0].name}<br/>
  65. 利用率:${rate}<br/>
  66. 提升幅度:${sign}${diff}
  67. `
  68. }
  69. },
  70. xAxis: {
  71. type: 'category',
  72. data: months
  73. },
  74. yAxis: {
  75. type: 'value',
  76. name: '利用率'
  77. },
  78. series: [
  79. {
  80. name: '月度利用率',
  81. type: 'line',
  82. data: rates,
  83. smooth: true,
  84. label: {
  85. show: true,
  86. formatter: '{c}'
  87. },
  88. lineStyle: {
  89. color: '#5470C6'
  90. },
  91. itemStyle: {
  92. color: '#91cc75'
  93. }
  94. }
  95. ]
  96. }
  97. })
  98. </script>
  99. <style scoped>
  100. .chart-container {
  101. width: 100%;
  102. height: 400px;
  103. margin: 0 auto;
  104. }
  105. </style>