electricity-info-card 是一个高度可定制、功能丰富的用电信息展示卡片。它以美观的视觉设计和交互式图表，全面展示家庭用电的各类数据，同时各类信息都可以随心所欲的控制是否显示。其内置light（亮色）、dark（暗色）、black、power（国家电网主题）、transparent（半透明）、blue、green、red、purple、yellow、cyan、pink、orange 等12种主题，可根据时间、设备自动切换主题等。
实时余额显示 - 清晰展示当前电费余额
阶梯电价可视化 - 三种阶梯用电量区间直观展示
分时用电分析 - 尖、峰、平、谷各时段用电量分布
本月/上月/年度统计 - 多维度的用电数据对比
多种图标展示
阶梯电价配置 - 支持自定义各阶梯电量和价格
计费周期设置 - 灵活配置计费周期（如：7.1-6.30）
颜色主题定制 - 支持卡片背景色自定义
显示元素控制 - 可选择性显示/隐藏各项内容
自适应布局，在不同设备上均有良好显示效果
平滑的动画过渡效果
直观的视觉指示器
2026年3月31日
1.新增动态排名图（在年度中）；
2.新增最新数据（用量和金额）；
3.增加在余额右上角显示缴费次数（需要配置缴费）；
4.新增同比用量增加或者减少百分比；
5.将非电力时，预计使用天数算法改为使用最近30日的金额来计算；
6.修复了一些bug；
=======================================================
2026年3月6日
1.新增每日用电桑基图（如果要使用桑基图， device_entity.name的值必须命名为“房间名称-设备名称”，如：客厅-灯）；
2.非预付费用户，日历单元格不显示预计进度条；
3.将弹出窗口（缴费、日用电详情）渲染到 document.body，避免了被父窗口截断的bug；
4.优化读取历史用电量数据的算法。
========================================================
2026年2月23日
- 预计使用天数后方增加了日期；
- 数据后方增加显示数据标签（今天、昨天、前天、x天前）；
- 本月日历图中新增预计使用天数的进度条（日历单元格底部绿色条带）；
- 日用点详情中将原来的环形饼图改为柱状图和曲线图的组合图（今日和历史今日）。
========================================================
2026年2月5日
- 阶梯指示器适配了6种计费标准（年阶梯峰平谷、年阶梯、月阶梯峰平谷、月阶梯峰平谷变动价格、月阶梯、平均单价）；
- 如果配置了缴费实体，年度图表增加了缴费面积以；
- 热力图增加了显示今日（红色线框）；
- 修复了只有一个户/类时，中间图标错位的问题。
========================================================
2026年2月4日新增以下功能
- 新增多户/类（水电气），通过utility_type参数控制（ele：电、water：水、gas：气）。
- 新增缴费实体。如果配置了缴费实体，则必须指定节点和字段。通过指定节点、字段来映射后点击余额的大字后会弹出缴费记录。
- 日图表优化。
- 删除通过json文件获取缴费历史的功能。
- 删除通过json文件获历史数据的功能。
- 修改了卡片配置的要求：
当为电力时（utility_type为ele ），无需配置阶梯信息。自动识别xiaoshi实体内容来显示，其他用法与以前的一致。
type: custom:electricity-info-card
theme: input_select.theme #主题，原来的用法，新增了darkgray主题
dark_light_theme: darkgray,light #指定暗色和亮色主题，原来的用法
name: 我的电费、燃气费
show_name: false #是否显示名称，可选项，不配置时，显示名称
multiclass:
"1": #第一户
utility_type: ele #类型，有三种，ele电、gas气、water水
info: My #会在多户的余额下方显示
entity: sensor.yong_dian_xin_xi_new #实体，用电实体（xiaoshi实体）
jiaofei_entity: sensor.jiaofei,[node:data,date:time,pay_amount:cost,pay_mode:source] #缴费实体，注意，必须要指定节点、字段
hide: null #隐藏项，和原来一样
device_entity: #设备实体，配置后可以点击日历单元格，弹出设备使用时长、用电量、和具体的时间（轴）
- entity: light.ertongfang_xidingdeng
name: 儿童房主灯
power: 50
- entity: climate.xiaomi_cn_572101627_m6
name: 儿童房空调
on_state: cool,dry,fan_only,heat
- entity: switch.giot_cn_1126348886_v64ksm_on_p_4_1
name: 洗衣机
power_entity: sensor.xiyiji_day
"2":
utility_type: gas
info: My
entity: sensor.tian_ran_qi_2_new
jiaofei_entity: >-
sensor.tian_ran_qi_2,[node:jiaofei,date:orderDate,pay_amount:orderMoney,pay_mode:state]
hide: null1
tier1_max: 480
tier1_price: 2.14
tier2_max: 660
tier2_price: 2.57
tier3_price: 3.21
billing_cycle: 1.1-12.31
缴费实体配置说明：
jiaofei_entity: sensor.tian_ran_qi,[node:data,date:time,pay_amount:cost,pay_mode:source]
node节点
date日期
pay_amount支付金额
pay_mode支付方式
演示如下：
============================================================================================
2026年1月27日新增以下功能：
1、新增缴费历史实体（保留通过json文件获取缴费历史的接口）；
2、调整缴费历史弹出窗口；
3、新增用电量热力图（年视图中）；
缴费历史实体要求：
状态属性字段需要包含：
1)、需要在实体的Paylist的状态属性中
2)、包含 payDate，如: "2025-12-29 10:00:46"
3)、包含payModeName，如: 网上国网交费
4)、包含rcvAmt，如: "200"
示例：
paylist:
- payMode: "0104"
rcvAmt: "200"
payDate: "2025-12-29 10:00:46"
- payMode: "0104"
rcvAmt: "50"
payDate: "2025-12-24 15:53:13"
2026年1月26日新增以下功能
1、可导入年月的历史数据，在年月图表中查看；
2、可导入缴费历史，点击余额弹出缴费历史窗口；
3、新增合计环形图表；
4、新增分年度环形图表；
文件地址：www\electricity_history\usage.json
{
"electricity_month": [
{
"ID" : 1,
"year" : 2016,
"month" : 4,
"y_m" : "2016-04",
"ele" : 41.0,
"p_ele" : 41.0,
"n_ele" : 0,
"t_ele" : 0,
"v_ele" : 0,
"money" : 20.43,
"stairs" : "1"
},
......
{
"ID" : 75,
"year" : 2024,
"month" : 12,
"y_m" : "2024-12",
"ele" : 331.0,
"money" : 180.09,
"stairs" : null
}
]}文件地址：www\electricity_history\pay.json
{
"delectricity_pay": [
{
"id" : 1,
"time" : "2022-01-21 19:17:58",
"cost" : 200.0,
"source" : " 电e宝"
},
.....
{
"id" : 69,
"time" : "2025-08-24 10:02:23",
"cost" : 50.0,
"source" : " 网上国网交费"
}
]}`v2.0.3
2026年1月23日新增以下功能
1、优化图表显示（电量、金额的轴刻度显示、图例修改）；
2、卡片正常显示的最小宽度为360px；
3、去掉三个按钮中数值的背景阴影，显示更清晰；
4、新增纯黑主题（black）；
5、新增主题切换跟随时间（time）和设备（phone）；6:00-18:00 为白天，其他为晚上
6、新增卡片配置项（dark_light_theme）指定暗色和亮色主题，当跟随时间、跟随设备、on/off时使用dark_light_theme的配置来切换暗色和亮色。
总体来说，主要修改通过dark_light_theme配置项来自定义暗色和亮色，在需要切换时（theme值或者实体为time、phone、on、off）根据参数来切换
V2.0.1
2026年1月22日更新
1、优化了UI布局，修正了阶梯指示器超出卡片外部（Mr.G先生完成，在此表示感谢）。
2、主题配置新增time（跟随时间切换亮色和暗色）、phone（跟随手机系统或者浏览器切换亮色和暗色），当不配置theme时会使用默认的power主题。
3、图表细节优化。
有可用的用电信息传感器实体，使用xiaoshi的国家电网辅助实体，或者符合以下数据格式要求的也可以
date: "2025-12-18 10:49:11"
daylist:
- day: "2025-12-17"
dayEleNum: 11.25
dayEleCost: 6.08
dayTPq: 0
dayPPq: 5.09
dayNPq: 3.58
dayVPq: 2.56
monthlist:
- month: 2025-12
monthEleNum: 187.4
monthEleCost: 100.47
monthTPq: 0
monthPPq: 77.61
monthNPq: 63.19
monthVPq: 46.58
yearlist:
- year: "2025"
yearEleNum: 4237.4
yearEleCost: 2272.34
yearTPq: 0
yearPPq: 1748.95
yearNPq: 1349.07
yearVPq: 1029.04将 electricity-info-card.js 文件放入 Home Assistant 的 www 目录
在 Lovelace 配置中添加资源引用：
resources:
- url: /local/electricity-info-card.js
type: moduletype: custom:electricity-info-card
entity: sensor.electricity_info
dark_light_theme: black,red #可选，自定义暗色和亮色主题名称，在使用 `time`、`phone` 或实体 `on/off` 状态时，必须先配置 `dark_light_theme`
name: 家庭用电
hide: #可选，值见下表，意思是要隐藏的要素，可填写多个，具体见后
theme: input_select.theme #可选配置，可以是实体，也可以是文本(也可以填写为on/off)，实体支持两种，一种为开关类，如果填写开关类则只会在亮色和暗色间切换；一种是下拉型实体，可选值为：light、dark、power、transparent、blue、green、red、purple、yellow、cyan、pink、orange、time（跟随时间切换亮色和暗色）、phone（跟随手机系统或者浏览器切换亮色和暗色）
tier1_max: 2160 #第一阶梯最大值
tier1_price: 0.4983 #第一阶梯单价
tier2_max: 4200 #第二阶梯最大值
tier2_price: 0.5483 #第二阶梯单价
tier3_price: 0.7983 #第三阶梯单价
billing_cycle: 7.1-6.30 #阶梯周期，填写月日
device_entity: #可选，用电设备
- entity: light.ertongfang_xidingdeng #实体ID
name: 儿童房主灯 #实体名称
power: 50 #可选，功率值，如果填写此项会根据此项计算用电量，计算方法为 power x 时长 /1000
- entity: climate.xiaomi_cn_572101627_m6
name: 儿童房空调
on_state: cool,dry,fan_only,heat #可选，定义开启状态值，可以为多项
- entity: switch.giot_cn_1126348886_v64ksm_on_p_4_1
name: 洗衣机
power_entity: sensor.xiyiji_day #可选，用电量实体
//===========================hide隐藏项说明=============================//
electricity-price-display 电价显示区域
remaining-days-display 剩余天数显示区域
tier-indicator 阶梯指示器
time-distribution-bar 分时用电条
data-container 统计数据容器
user-info 标题
pie-chart-section 饼图
timeline-container 设备时间线容器
calendar-stats 日历统计信息