南瑞意见修改:前端页面和后端接口

web/src/components/Home/MyChartBar.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="mychart">
+    <!-- <div class="text_Cur">
+      <div v-for="item in curList" :key="item.key">
+        <div>{{ item.name }}</div>
+        <span class="mark">{{ item.value ? item.value : 0 }}</span>
+        <span class="d">{{ item.d }}</span>
+      </div>
+    </div> -->
+    <div :id="myChartId" class="mychart"></div>
+  </div>
+</template>
+
+<script>
+import { processData } from '@/utils/dealWithData'
+
+export default {
+  name: '',
+  props: {
+    propKey: { type: String, default: '' },
+    propData: { type: Array,　default: () => []　},
+    propOption: {　type: Object,　default: { series: [] }　}
+  },
+  data() {
+    return {
+      myChartId: 'mychart' + Math.floor(Math.random() * 9999),
+      myEchart: null,
+      xData: [],  // EChart的 x 轴 option
+      yData: [],  // EChart的 y 轴 option
+    }
+  },
+  watch: {
+    propData: {
+      handler(newVal, oldVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.$nextTick(() => {
+            this.drawLineChart()
+          })
+        }
+      },
+      immediate: true, // 初始化时更新
+      deep: true // 确保深度比较
+    },
+    propOption: {
+      handler(newVal, oldVal) {
+      },
+      immediate: true,
+    }
+  },
+  mounted() { },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.myEchart) {
+      this.myEchart.dispose()
+      this.myEchart = null
+    }
+  },
+
+  methods: {
+    handleResize() {
+      if (this.myEchart) {
+        this.myEchart.resize()
+      }
+    },
+
+    getChartData() {
+      const keyList = this.propOption.series.map((item) => item.key)
+      const result = processData(this.propData, keyList)
+      this.xData = result.dates
+      this.yData = result.values
+
+      if (this.xData.length == 0) {
+        const today = new Date();
+        for (let i = 6; i >= 0; i--) {
+          const date = new Date(today); // 每次创建新日期实例（避免修改原日期）
+          date.setDate(today.getDate() - i); // 往前推 i 天
+          const year = date.getFullYear();
+          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份 0-11，需 +1
+          const day = String(date.getDate()).padStart(2, '0');
+          this.xData.push(`${month}-${day}`);
+
+          for (let j = 0; j < keyList.length; j++) {
+            if (j == 0) this.yData.push([])
+            else this.yData[j].push(0)
+          }
+        }
+      }
+    },
+
+    drawLineChart(activeKey) {
+
+      this.getChartData(activeKey)
+      if (this.myEchart) {
+        this.myEchart.dispose()
+      }
+      const chartDom = document.getElementById(this.myChartId)
+      if (!chartDom) return;
+      let myEchart = this.$echarts.init(chartDom)
+      this.myEchart = myEchart
+      let option = {
+        animation: false,
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        legend: { top: 10, textStyle: { color: '#fff' } },
+        grid: { left: '3%', right: '4%', bottom: '1%', top: '32%' },
+        xAxis: {
+          type: 'category',
+          data: this.xData,
+          axisLine: { lineStyle: { type: 'dashed', color: '#435463' } },
+          axisLabel: { color: '#fff' }
+        },
+        yAxis: [],
+        series: []
+      }
+
+      const yAxisItem = {
+        name: '',
+        type: 'value',
+        min: 0,
+        max: 2,
+        //interval: 1,  // 强制步长
+        splitNumber: 2, // 分段数
+        nameTextStyle: { color: '#fff' },
+        splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
+        axisLabel: { color: '#fff', fontSize: 12 },
+      }
+
+      if (this.propOption.yAxis) {
+        this.propOption.yAxis.forEach((item, index) => {
+          const maxVal = Math.max(...this.yData[index]);
+          if (maxVal && maxVal > 0) {
+            yAxisItem.min = undefined
+            yAxisItem.max = maxVal
+          }
+          yAxisItem.name = item
+          option.yAxis.push(yAxisItem)
+        })
+      }
+
+      if (this.propOption.series) {
+        this.propOption.series.forEach((item, index) => {
+          option.series.push({
+            name: item.name,
+            type: 'bar',
+            color: item.color,
+            data: this.yData[index],
+            barWidth: '20%'
+          })
+        })
+      }
+
+      if (option.yAxis.length == 0) { option.yAxis.push(yAxisItem) }
+      option && myEchart.setOption(option)
+      this.setupResizeListener()
+
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize);
+      window.addEventListener('resize', this.handleResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mychart {
+  height: calc(100% - 35px);
+  background-color: #80808010;
+
+  .mychart {
+    height: calc(100% - 5px);
+  }
+}
+</style>