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

<template>
  <div class="charge">
    <!-- <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="charge-chart"></div>
  </div>
</template>

<script>
import {processData} from '@/utils/dealWithData'

export default {
  name: '',
  props: {
    total: {
      type: Object,
      default: () => {}
    },
    deviceInfo: {
      type: Array,
      default: () => []
    },
    myData: {
      type: Number, 
      default: () => -1
    }
  },
  data() {
    return {
      curList: [
        {
          name: '充电电量',
          key: 'charge_elect',
          lineColor: '#00BBA3',
          colorStart: ' rgba(10, 250, 106, 0.15)',
          colorEnd: ' rgba(171, 255, 249, 0.3)',
          value: 0,
          d: 'kW·h'
        },
        {
          name: '充电次数',
          key: 'charge_num',
          lineColor: '#3F80F2',
          colorStart: ' rgba(99, 151, 235, 0.3)',
          colorEnd: ' rgba(24, 109, 245, 0.3)',
          value: 0,
          d: ''
        }
      ],
      curListEcharts: [
        {
          name: '充电电量',
          key: 'charge_elect',
          lineColor: '#00BBA3',
          colorStart: ' rgba(10, 250, 106, 0.15)',
          colorEnd: ' rgba(171, 255, 249, 0.3)',
          value: 0,
          d: 'kW·h'
        },
        {
          name: '充电收益',
          key: 'income_charge',
          lineColor: '#3F80F2',
          colorStart: ' rgba(99, 151, 235, 0.3)',
          colorEnd: ' rgba(24, 109, 245, 0.3)',
          value: 0,
          d: ''
        }
      ],
      chargeChart: null,
      chargeChartData: {
        ydata: [],
        xdata: []
      }
    }
  },
  watch: {
    total: {
      handler(newVal,oldVal) {
        if (newVal!==oldVal) {
          this.curList.forEach((item) => {
            item.value = this.total[item.key]
          })
        }
      },
     
    },
    deviceInfo: {
      handler(newVal,oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          this.$nextTick(() => {
            this.drawLineChart()
          })
        }
      },
      deep: true // 确保深度比较
    },
    myData: {
      handler(newVal,oldVal) {
      },
    }
  },
  mounted() {},
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
    if(this.chargeChart){
      this.chargeChart.dispose()
      this.chargeChart = null
    }
  },

  methods: {
    handleResize() {
      if(this.chargeChart){
        this.chargeChart.resize()
      }
    },
   
    getChargeData() {
      const arr = this.curListEcharts
      const keyList = this.curListEcharts.map((item) => item.key)
      const result = processData(this.deviceInfo, keyList)

      this.chargeChartData.xdata = result.dates
      arr.forEach((item, index) => {
        this.chargeChartData.ydata[index] = {
          name: item.name,
          // smooth: true,
          // type: 'line',
          // barWidth: 10,
          // itemStyle: {
          //   borderRadius: 10,
          //   color: item.lineColor
          // },
          // emphasis: {
          //   focus: 'series'
          // },
          // areaStyle: {
          //   global: false,
          //   color: {
          //     type: 'linear', x: 0, y: 0,　x2: 0,　y2: 1,
          //     colorStops: [
          //       { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
          //       { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
          //     ]
          //   }
          // },
          // global: false,
          // showSymbol: false,
          // yAxisIndex: index,
          // data: result.values[index]
          type: 'bar',
          data: [18,25,39,17,37,41,62],
          color:  item.lineColor
        }
      })
    },

    drawLineChart(activeKey) {
      // const labelCount = Math.floor(500 / 30);
      this.getChargeData(activeKey)
      if(this.chargeChart){
        this.chargeChart.dispose()
      }
      const chartDom = document.getElementById('charge-chart')
      if (!chartDom) return;
      let chargeChart = this.$echarts.init(chartDom)
      this.chargeChart = chargeChart
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: '32%',
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chargeChartData.xdata,
          axisLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: [
          {
            name: '充电电量(kWh)',
            type: 'value',
            splitNumber: 2,
            nameTextStyle: {
              color: '#fff' // 绿色名称
            },
            splitLine: {
              lineStyle: { type: 'dashed', color: '#435463' }
            },
            axisLabel: {
              // interval: 2,
              color: '#fff',
              fontSize:12
            },
            // axisLine : {show: true, color: '#f00'}
          },
          {
            name: '充电收益(元)',
            type: 'value',
            splitNumber: 2,
            splitLine: {
              lineStyle: { type: 'dashed', color: '#435463' }
            },
            nameTextStyle: {
              color: '#fff' // 绿色名称
            },
            axisLabel: {
              // interval: 4,
              color: '#fff',
              fontSize:12
            },
            // axisLine : {show: true, lineStyle: { color: '#ff0000', width: 2 } }
          },
         
        ],
        series: this.chargeChartData.ydata
        // serise: [
        //   { name: '2011', type: 'bar', data: [18, 23, 29, 10, 13, 63] }
        // ]
      }
      option && chargeChart.setOption(option)
      this.setupResizeListener()

    },
    setupResizeListener(){
      window.removeEventListener('resize', this.handleResize);
      window.addEventListener('resize', this.handleResize)
    }
  }
}
</script>

<style lang="scss" scoped>
.charge {
  height: calc(100% - 35px);
  background-color: #50505050;
  #charge-chart {
    height: calc(100% - 5px);
  }
}


</style>