【Echarts】“折线+柱状”实现双图表-家庭用电量可视化【文章附完整代码】

最新推荐文章于 2026-02-04 16:17:06 发布

原创最新推荐文章于 2026-02-04 16:17:06 发布 · 1.8k 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts #信息可视化 #前端

Vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

Echarts

3 篇文章

订阅专栏

前言

在数据可视化领域，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!