【Echarts】“折线+柱状”实现双图表-家庭用电量可视化【文章附完整代码】
前言
在数据可视化领域，ECharts 是一款强大的开源图表库，能轻松实现各种复杂的可视化需求。本文将通过一个家庭用电量监控的实战案例，带大家掌握 ECharts 的核心用法，包括双图表联动、动态数据更新和智能颜色映射等功能。即使是前端新手，也能通过这个案例快速入门数据可视化开发。
一、案例背景：为什么需要用电可视化？
想象这样一个场景：你发现家里电费突然飙升，但不知道具体原因。如果有一个可视化工具能实时展示不同时段的用电情况，就能轻松发现高耗能时段 —— 比如晚上同时开启空调、烤箱和热水器时的用电峰值。这正是我们要实现的功能：
- 用折线图展示实时用电功率波动
- 用柱状图展示平均用电趋势
- 通过颜色变化直观反映用电负荷等级
- 自动模拟 24 小时用电数据变化
先来看最终效果：图表会每 5 秒自动更新数据，凌晨时段呈现浅蓝色的低用电状态，傍晚开始出现橙色 / 红色的高用电区域，偶尔还会触发深红色的极高用电警告。
二、核心功能实现
1. 准备工作：项目结构与依赖
用npm create vue@latest创建一个vue3项目，详细教程可以参考我写的这篇文章
vue3从0到1创建echarts案例示范，保姆级教程【图文+代码】
2. 图表基础架构：双图表联动设计
使用组合式 API 搭建图表框架：
<template><e-charts class="chart" :option="chartOption" />
</template><script setup>
import { ref, onMounted } from 'vue';
import ECharts from 'vue-echarts';// 定义用电负荷区间
const LowUsage = 100; // 低用电
const ModerateUsage = 300; // 中等用电
const HighUsage = 600; // 高用电
const VeryHighUsage = 800; // 非常高用电
const ExtremeUsage = 1000; // 极高用电const chartOption = ref({title: { text: '家庭一天用电量分布', subtext: '实时监控数据' },tooltip: { /* 交互提示配置 */ },toolbox: { /* 工具箱功能 */ },xAxis: { /* 时间轴配置 */ },yAxis: { /* 功率轴配置 */ },series: [{ // 折线图：实时用电type: 'line', name: '实时功率', data: [], lineStyle: { color: 'yellow' }},{ // 柱状图：平均用电type: 'bar', name: '平均功率', data: [], barWidth: 20}]
});
</script>这里最关键的是
series配置：同时使用line和bar两种图表类型，实现折线图与柱状图的联动展示。
3. 动态数据生成：模拟真实用电场景
为了让图表数据更符合生活场景，我们需要按时间段生成不同特征的数据：
// 生成符合家庭用电规律的随机数据
const generateRandomData = () => {const data = [];for (let i = 0; i < 20; i++) {let value;if (i < 5) { // 凌晨时段(00:00-05:00)：90%概率低用电value = Math.random() < 0.9 ? Math.floor(Math.random() * LowUsage): Math.floor(Math.random() * (ModerateUsage - LowUsage) + LowUsage);} else if (i < 15) { // 白天时段(06:15-17:30)：偶尔出现高用电const rand = Math.random();if (rand < 0.7) value = lowToModerate();else if (rand < 0.95) value = moderateToHigh();else value = highToVeryHigh();} else { // 晚上时段(18:45-23:45)：10%概率触发极高用电const rand = Math.random();if (rand < 0.5) value = moderateToHigh();else if (rand < 0.9) value = highToVeryHigh();else value = veryHighToExtreme();}data.push(value);}return data;
};通过分段概率控制，我们让数据更符合真实用电规律：凌晨以低功率为主，傍晚开始出现高负荷，晚上偶尔触发极端用电场景。
4. 智能颜色映射：让数据 "会说话"
为了让图表更直观，我们需要根据用电功率动态改变柱状图颜色：
series: [// 折线图配置...{type: 'bar', name: '平均功率',data: [],barWidth: 20,itemStyle: {// 关键：根据数据值动态设置颜色color: ({ value }) => {if (value <= LowUsage) return 'lightblue';if (value <= ModerateUsage) return 'green';if (value <= HighUsage) return 'orange';if (value <= VeryHighUsage) return 'red';return 'darkred'; // 极高用电}}}
]同时配置视觉映射条，在图表底部显示颜色对应的用电等级：
visualMap: {type: 'piecewise',orient: 'horizontal',bottom: 10,left: 'center',pieces: [{ lte: LowUsage, color: 'lightblue', label: '低' },{ gt: LowUsage, lte: ModerateUsage, color: 'green', label: '中' },{ gt: ModerateUsage, lte: HighUsage, color: 'orange', label: '高' },{ gt: HighUsage, lte: VeryHighUsage, color: 'red', label: '非常高' },{ gt: VeryHighUsage, color: 'darkred', label: '极高' }]
}5. 动态更新机制：让图表 "活" 起来
最后，我们在组件挂载时启动数据更新循环：
onMounted(() => {// 初始化数据updateChartData();// 每5秒更新一次数据setInterval(() => {updateChartData();}, 5000);
});const updateChartData = () => {const newRealTimeData = generateRandomData();const newAverageData = generateRandomData();chartOption.value.series[0].data = newRealTimeData;chartOption.value.series[1].data = newAverageData;chartOption.value.title.subtext = `更新时间: ${new Date().toLocaleTimeString()}`;
};这样一来，图表就会像真实监控系统一样，不断刷新显示最新的用电数据。
三、实战效果与应用扩展
1. 实际运行效果
当项目运行后，你会看到：
- 凌晨时段（00:00-05:00）图表以浅蓝色为主，只有少量绿色柱状
- 早上 7 点后开始出现绿色（中等用电），对应起床后的电器使用
- 晚上 6 点后大量出现橙色 / 红色柱状，模拟晚餐和休闲时段的用电高峰
- 偶尔会有深红色柱状出现，表示同时开启多个大功率电器的极端情况
2. 进阶扩展方向
这个基础案例还可以进一步优化：
- 添加数据存储：连接后端 API，存储真实用电数据
- 增加用电分析：计算每日 / 每周用电趋势，生成节能建议
- 设备级可视化：细分不同电器的用电占比
- 预警功能：当用电超过阈值时发送通知
- 移动端适配：优化小屏幕显示效果
四、总结+代码获取方式
1.总结
通过这个家庭用电量可视化案例，我们学习了 ECharts 的多个关键知识点：
- 图表组合：同时使用折线图和柱状图，实现多维数据展示
- 动态数据：通过
setInterval实现定时数据更新- 视觉映射：根据数据值动态改变图表颜色，增强可读性
- 交互设计：tooltip 提示、工具箱功能等用户交互优化
- 场景化数据模拟：根据实际场景特征生成符合逻辑的数据
2.案例代码获取
https://gitee.com/kaimana/echarts_vue3.git版本：node22+vue3
//项目初始化
npm install
//程序运行
npm run dev欢迎大家star!
