energy_storage/web/src/components/predict/predictEcharts.vue

<template>
  <div class="echarts">
    <div class="chart-container" >
      <div class="content-header" v-if="chartOptions.title">
        <div class="verline"></div>
        <span>{{ chartOptions.title }}</span>
      </div>
      <!-- {{ chartData.ydata }} -->

      <div ref="chartContainer" class="echarts-content"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PredictEcharts',
  props: {
    chartOptions: {
      type: Object,
      default: () => {}, // 默认空对象
      required: false // 非必须
    },
    chartData: {
      type: Object,
      default: () => ({}), // 默认空对象
      required: false // 非必须
    }
  },
  data() {
    return {
      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: {
    initCharts() {
      const {infoKeys,dataKey,type,smooth}=this.chartOptions
      
      const dom = this.$refs.chartContainer
      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'
          },
          data: infoKeys.map((info) => info.label)
        },

        grid: {
          left: '3%',
          right: '3%',
          bottom: '15%',
          // containLabel: true
        },
        dataZoom: [
          {
            type: 'slider', // 滑动条型
            show: true,
            xAxisIndex: 0, // 控制第一个X轴
            start: 0,      // 初始显示范围起点（百分比）
            end: 100,       // 初始显示范围终点（百分比）
            height: 20,    // 滑动条高度
            bottom: 10     // 距离底部距离
          },
          {
            type: 'inside', // 内置型（鼠标滚轮/拖拽交互）
            xAxisIndex: 0,
            start: 0,
            end: 100
          }
        ],
        xAxis: {
          type: 'category',
          data: this.chartData.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff' // x轴线颜色
            }
          },
          
          axisLabel: {
            color: '#fff'
          },
    
          axisTick: {
            lineStyle: {
              color: '#fff' // x 轴刻度线颜色
            }
          },
          

        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff' // y轴线颜色
            }
          },
          axisLabel: {
            color: '#fff'
          },
          
          splitLine: {
            lineStyle: {
              color: '#A6B8DD', // 网格线颜色,
              type: 'dashed'
            }
          }
        },
        series: infoKeys.map((info, i) => {
          return {
            name: info.label,
            smooth: smooth || false,
            type: type,
            data: this.chartData.ydata[info.key],
            ...info.seriesOptions,
          }
        })
      })
    //   })
    },
    
    handleResize() {
      this.chartInstances.forEach((chart) => chart && chart.resize())
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  width: 100%;
}
.echarts {
  display: flex;
  height: 100%;
  width: 100%;
  color: #fff;
.chart-container {
      width: 100%;
      height: 100%;
    }
  & > div {
   
    width: 100%;
    height: 100%;

    

    .content-header {
      height: 20px;
      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;
      }
    }
    .echarts-content{
      height: calc(100% - 20px);
      width: 100%;
    }
  }
}
</style>