energy_storage/web/src/components/Home/MyChartBar.vue

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