energy_storage/web/src/components/statisticalAnalysis/energyEchart.vue

<template>
  <div class="content">
    <div class="content-echarts">
      <div v-for="(chart, index) in chartOptions" :key="index">
        <div class="content-header">
          <div class="verline"></div>
          <span>{{ chart.title }}</span>
        </div>
        <div :ref="`chartContainer${index}`" class="chart-container"></div>
      </div>
    </div>
    <div class="content-table">
       
      <ComTable
        :columns="columns"
        :table-data="tableData"
        @handlePagesizeChange="handlePagesizeChange"
        ref="comTable"
        :table-option="tableOption"
        :page-option="pageOption"
        :table-h="tableH"
      ></ComTable>
    </div>
  </div>
</template>
<script>
import {postReq} from '@/request/api'
import ComTable from '@/components/ComTable'
export default {
  name: 'StatisicalAnView',
  components: { ComTable },
  props: {
    tableInfo:{
      type: Object,
      default: () => ({}), // 默认空对象
      required: false,    // 非必须
    },
    columns: {
      type: Array,
      default: () => [], // 默认空对象
      required: false // 非必须
    },
    chartOptions: {
      type: Array,
      default: () => [], // 默认空对象
      required: false // 非必须
    },
    chartData: {
      type: Object,
      default: () => ({}), // 默认空对象
      required: false // 非必须
    }
  },
  data() {
    return {
      paramsDate: {},
      tableData: [],
      tableOption: {
        scroll: {
          x: 1500
        }
      },
      tableH: 0,
      pageOption: {
        current: 1,
        pageSize: 15,
        total: 1
      },
      //   chartOptions: [
      //     {
      //       title: '充放电分析',
      //       type: 'bar',
      //       dataKey: 'sales',
      //       infoKeys: [
      //         { key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
      //         { key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
      //       ]
      //     },
      //     {
      //       title: '运行状态分析',
      //       type: 'bar',
      //       dataKey: 'users',
      //       infoKeys: [
      //         { key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
      //         { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
      //         { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
      //       ]
      //     },
      //     {
      //       title: '电压与电流分析',
      //       type: 'line',
      //       dataKey: 'stock',
      //       infoKeys: [
      //         {
      //           key: 'key1',
      //           label: '电压',
      //           lineColor: '#3F80F2',
      //           colorStart: ' rgba(10, 250, 106, 0.15)',
      //           colorEnd: ' rgba(171, 255, 249, 0.3)'
      //         },
      //         {
      //           key: 'key2',
      //           label: '电流',
      //           lineColor: '#A9A6FF',
      //           colorStart: ' rgba(10, 250, 106, 0.15)',
      //           colorEnd: ' rgba(171, 255, 249, 0.3)'
      //         }
      //       ]
      //     },
      //     {
      //       title: '功率分析',
      //       type: 'line',
      //       dataKey: 'yearly',
      //       infoKeys: [
      //         {
      //           key: 'key1',
      //           label: '功率',
      //           lineColor: '#00FFFB',
      //           colorStart: ' rgba(10, 250, 106, 0.15)',
      //           colorEnd: ' rgba(171, 255, 249, 0.3)'
      //         }
      //       ]
      //     }
      //   ],
      //   chartData: {
      //     sales: [
      //       {
      //         date: '2025-08-30',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-29',
      //         key1: 8,
      //         key2: 5,
      //         key3: 5,
      //         key4: 7
      //       },
      //       {
      //         date: '2025-08-28',
      //         key1: 0,
      //         key2: 10,
      //         key3: 20,
      //         key4: 4
      //       },
      //       {
      //         date: '2025-08-27',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-26',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-25',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-24',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-23',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-22',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-21',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-20',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-19',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-18',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       },
      //       {
      //         date: '2025-08-17',
      //         key1: 10,
      //         key2: 0,
      //         key3: 15,
      //         key4: 5
      //       }
      //     ],
      //     users: [
      //       { value: 40, name: 'A' },
      //       { value: 60, name: 'B' }
      //     ],
      //     stock: [30, 50, 80],
      //     yearly: [100, 120, 90, 110]
      //   },
      chartInstances: [] // 存储 ECharts 实例
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 确保 DOM 完全渲染
      this.initCharts()
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
    this.chartInstances.forEach((chart) => chart && chart.dispose())
  },
  methods: {
    async getList() {
      let that = this
      this.$refs.comTable.loading = true
      const query = {
        ...this.paramsDate,
        pageSize: this.pageOption.pageSize,
        pageNumber: this.pageOption.current
      }
      try {
        const res = await postReq(query, this.tableInfo.getUrl)
        if (res.code === 200) {
          this.$refs.comTable.loading = false
          this.tableData = res.data.records
          this.pageOption = {
            current: res.data.pageNumber,
            pageSize: res.data.pageSize,
            total: res.data.totalRow
          }
          this.getScrollDateFail = false
        } else {
          throw res
        }
      } catch (error) {
        that.tableData = []
        that.$refs.comTable.loading = false
      }
    },
    initCharts() {
      this.chartOptions.forEach((option, index) => {
        const dom = this.$refs[`chartContainer${index}`][0]
        if (!dom) return

        const chart = this.$echarts.init(dom)
        this.chartInstances.push(chart) // 存储实例

        // 设置图表配置
        chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: 20,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '3%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.processData(option.infoKeys, option.dataKey, this.chartData[option.dataKey])
              .dates,
            axisLine: {
              lineStyle: { type: 'dashed', color: '#435463' }
            },
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: { type: 'dashed', color: '#435463' }
            },
            axisLabel: {
              color: '#fff'
            }
          },
          series: option.infoKeys.map((info, i) => {
            return {
              name: info.label,
              smooth: true,
              type: option.type,
              barWidth: 10,
              itemStyle: {
                borderRadius: [10, 10, 0, 0],
                color: info.lineColor
              },
              emphasis: {
                focus: 'series'
              },
              areaStyle: {
                global: false,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: info.colorStart }, // 顶部颜色
                    { offset: 1, color: info.colorEnd } // 底部颜色
                  ]
                }
              },
              global: false,
              showSymbol: false,
              data: this.processData(
                option.infoKeys,
                option.dataKey,
                this.chartData[option.dataKey]
              ).values[i]
            }
          })
        })
      })
    },
    processData(keysList, dataKey, data) {
      const keys = keysList.map((item) => item.key)
      data.sort((a, b) => {
        return new Date(a.date) - new Date(b.date)
      })
      const dates = data.map((item) => item.date)
      const values = []

      keys.forEach((item, index) => {
        values[index] = data.map((dataValue) => dataValue[keys[index]])
      })
      return {
        dates,
        values
      }
    },
    handleResize() {
      this.chartInstances.forEach((chart) => chart && chart.resize())
    },
 
    handlePagesizeChange(pageOption) {
      this.pageOption.pageSize = pageOption.pageSize
      this.pageOption.current = pageOption.current
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: calc(100% - 38px);
  overflow: scroll;
}
.content-echarts {
  display: flex;
  flex-wrap: wrap;
  height: calc(750px - 38px);
  color: #fff;

  & > div {
    padding: 20px 5px;
    // margin-right: 10px;
    background-color: rgba(33, 105, 195, 0.12);
    border-radius: 2px;
    width: calc(50% - 15px);
    height: calc(50% - 10px);

    &:nth-child(odd) {
      margin-right: 10px;
    }
    .chart-container {
      width: 100%;
      height: 100%;
    }

    .content-header {
      font-size: 12px;
      display: flex;
      align-items: center;
      margin-left: 3%;
      .verline {
        margin-right: 10px;
        background: linear-gradient(
            180deg,
            rgba(0, 230, 172, 1) 0%,
            rgba(0, 210, 255, 1) 98.78%,
            rgba(0, 210, 255, 1) 100%
          ),
          rgba(1, 223, 239, 1);
        width: 4px;
        height: 20px;
        border-radius: 6px;
      }
    }
  }
}

.content-table {
  margin-top: 20px;
  min-height: 500px;
  width: 100%;
  padding-right: 10px;
}
</style>