分享一个国家电网的卡片（峰谷电电费计算）

yantao

Github：
我目前用的是这个，利用青龙，用起来目前效果还算不错
案例展示：

                               
登录/注册后可看大图

type: custom:apexcharts-card
header:
  show: true
  title: 最近7天用电量折线柱状图
graph_span: 8d
span:
  end: day
series:
  - entity: sensor.dian_fei_yu_e
    name: 用电量 (度)
    unit: 度
    type: line
    float_precision: 2
    show:
      datalabels: true
      legend_value: true
    data_generator: |
      const dayList = entity.attributes.dayList || [];
      if (!Array.isArray(dayList) || dayList.length === 0) {
        return [];
      }
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const yStr = yesterday.toISOString().slice(0,10);
      const filtered = dayList.filter(d => d.day <= yStr);
      const last7 = filtered.slice(0,7).reverse();
      return last7.map(item => [item.day, parseFloat(item.dayElePq) || 0]);
  - entity: sensor.dian_fei_yu_e
    name: 峰电 (度)
    unit: 度
    type: column
    float_precision: 2
    show:
      datalabels: false
      legend_value: true
    data_generator: |
      const dayList = entity.attributes.dayList || [];
      if (!Array.isArray(dayList) || dayList.length === 0) {
        return [];
      }
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const yStr = yesterday.toISOString().slice(0,10);
      const filtered = dayList.filter(d => d.day <= yStr);
      const last7 = filtered.slice(0,7).reverse();
      return last7.map(item => [item.day, parseFloat(item.thisPPq) || 0]);
  - entity: sensor.dian_fei_yu_e
    name: 谷电 (度)
    unit: 度
    type: column
    float_precision: 2
    show:
      datalabels: false
      legend_value: true
    data_generator: |
      const dayList = entity.attributes.dayList || [];
      if (!Array.isArray(dayList) || dayList.length === 0) {
        return [];
      }
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const yStr = yesterday.toISOString().slice(0,10);
      const filtered = dayList.filter(d => d.day <= yStr);
      const last7 = filtered.slice(0,7).reverse();
      return last7.map(item => [item.day, parseFloat(item.thisVPq) || 0]);
apex_config:
  chart:
    stacked: false
  xaxis:
    type: datetime
    labels:
      rotate: -45
      style:
        fontSize: 12px
  stroke:
    curve: smooth
    width: 3
  markers:
    size: 6
    colors:
      - "#FFA500"
    strokeWidth: 2
  tooltip:
    shared: true
    followCursor: true
  dataLabels:
    enabled: true
    offsetY: -10
    style:
      colors:
        - "#000"
yaxis:
  - min: 0

复制代码

                               
登录/注册后可看大图

type: custom:apexcharts-card
header:
  show: true
  title: 最近7天峰谷电和阶梯电费金额折线图
graph_span: 8d
span:
  end: day
series:
  - entity: sensor.dian_fei_yu_e
    name: 峰电金额 (元)
    unit: 元
    type: line
    float_precision: 2
    show:
      datalabels: true
      legend_value: true
    data_generator: |
      const dayList = entity.attributes.dayList || [];
      if (!Array.isArray(dayList) || dayList.length === 0) return [];

      // 阶梯峰电价区间
      const peakTier1 = 0.568;
      const peakTier2 = 0.618;
      const peakTier3 = 0.868;

      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const yStr = yesterday.toISOString().slice(0,10);
      const filtered = dayList.filter(d => d.day <= yStr);
      const last7 = filtered.slice(0, 7).reverse();

      let cumulative = 0;
      return last7.map(item => {
        const peakEle = parseFloat(item.thisPPq) || 0;
        cumulative += peakEle;

        let price = 0;
        if (cumulative <= 2760) {
          price = peakTier1;
        } else if (cumulative <= 4800) {
          price = peakTier2;
        } else {
          price = peakTier3;
        }
        return [item.day, +(peakEle * price).toFixed(2)];
      });
  - entity: sensor.dian_fei_yu_e
    name: 谷电金额 (元)
    unit: 元
    type: line
    float_precision: 2
    show:
      datalabels: true
      legend_value: true
    data_generator: |
      const dayList = entity.attributes.dayList || [];
      if (!Array.isArray(dayList) || dayList.length === 0) return [];

      // 阶梯谷电价区间
      const valleyTier1 = 0.288;
      const valleyTier2 = 0.338;
      const valleyTier3 = 0.588;

      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const yStr = yesterday.toISOString().slice(0,10);
      const filtered = dayList.filter(d => d.day <= yStr);
      const last7 = filtered.slice(0, 7).reverse();

      let cumulative = 0;
      return last7.map(item => {
        const valleyEle = parseFloat(item.thisVPq) || 0;
        cumulative += valleyEle;

        let price = 0;
        if (cumulative <= 2760) {
          price = valleyTier1;
        } else if (cumulative <= 4800) {
          price = valleyTier2;
        } else {
          price = valleyTier3;
        }
        return [item.day, +(valleyEle * price).toFixed(2)];
      });
  - entity: sensor.dian_fei_yu_e
    name: 阶梯电金额 (元)
    unit: 元
    type: line
    float_precision: 2
    show:
      datalabels: true
      legend_value: true
    data_generator: |
      const dayList = entity.attributes.dayList || [];
      if (!Array.isArray(dayList) || dayList.length === 0) return [];

      const tier1Price = 0.538;
      const tier2Price = 0.588;
      const tier3Price = 0.838;

      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const yStr = yesterday.toISOString().slice(0,10);
      const filtered = dayList.filter(d => d.day <= yStr);
      const last7 = filtered.slice(0, 7).reverse();

      let cumulative = 0;
      return last7.map(item => {
        const dayEle = parseFloat(item.dayElePq) || 0;
        cumulative += dayEle;

        let fee = 0;
        if (cumulative <= 2760) {
          fee = dayEle * tier1Price;
        } else if (cumulative <= 4800) {
          const remain1 = 2760 - (cumulative - dayEle);
          const tier1Part = remain1 > 0 ? remain1 : 0;
          const tier2Part = dayEle - tier1Part;
          fee = tier1Part * tier1Price + tier2Part * tier2Price;
        } else {
          const remain1 = 2760 - (cumulative - dayEle);
          const tier1Part = remain1 > 0 ? remain1 : 0;

          const remain2 = 4800 - (cumulative - dayEle) - tier1Part;
          const tier2Part = remain2 > 0 ? remain2 : 0;

          const tier3Part = dayEle - tier1Part - tier2Part;
          fee = tier1Part * tier1Price + tier2Part * tier2Price + tier3Part * tier3Price;
        }
        return [item.day, +fee.toFixed(2)];
      });
apex_config:
  xaxis:
    type: datetime
    labels:
      rotate: -45
      style:
        fontSize: 12px
  stroke:
    curve: smooth
    width: 3
  markers:
    size: 6
    colors:
      - "#FF4500"
      - "#1E90FF"
      - "#228B22"
    strokeWidth: 2
  tooltip:
    shared: true
    followCursor: true
  dataLabels:
    enabled: true
    offsetY: -10
    style:
      colors:
        - "#FF4500"
        - "#1E90FF"
        - "#228B22"
yaxis:
  - min: 0

复制代码