当前位置： 首页 > news >正文

【前端】在Vue3中绘制多系列柱状图与曲线图

news 2025/7/18 11:59:24

文章目录

    • 一、引言
    • 二、项目背景
    • 三、实现多系列柱状图
      • 1) 场景描述
      • 2) 数据准备
      • 3) 图表配置与初始化
      • 4) 效果说明
    • 四、实现堆叠曲线图
      • 1) 场景描述
      • 2) 数据准备
      • 3) 图表配置与初始化
      • 4) 效果说明
    • 五、完整代码
    • 总结

一、引言

在数据可视化领域，图表是展示复杂数据的重要工具。在Vue3项目中，结合ECharts库，我们可以轻松实现各种类型的图表展示，帮助用户更直观地理解数据背后的规律。本文将详细介绍如何在Vue3中实现两种常见的图表类型：多系列柱状图和堆叠曲线图，并结合实际场景进行数据展示。

二、项目背景

假设我们正在开发一个智能农业监控系统，需要展示不同农业设备的能耗数据以及不同大棚的温度变化数据。系统需要展示两种类型的图表：

  • 多系列柱状图：展示不同月份下，两个不同年份的灌溉系统能耗对比。
  • 堆叠曲线图：展示不同农业设备在一天中的能耗变化趋势。

三、实现多系列柱状图

1) 场景描述

我们监控某农业基地的月度灌溉系统能耗数据，对比2023年和2024年各月份的能耗情况。通过柱状图，可以直观地看到不同年份同一月份的能耗差异，帮助分析能耗变化趋势。

2) 数据准备

const barChartData = {categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],values1: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], // 2023年数据values2: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95, 105, 115]    // 2024年数据
}

3) 图表配置与初始化

let barChartInstance = null;const initBarChart = () => {const chartDom = document.getElementById('barChart');if (!chartDom) return;barChartInstance = echarts.init(chartDom);const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['2023年灌溉能耗', '2024年灌溉能耗'],top: 10,textStyle: {color: '#333'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: barChartData.categories,axisLine: {lineStyle: {color: '#d1d8e0'}}},yAxis: {type: 'value',splitLine: {lineStyle: {color: '#eee'}},axisLine: {lineStyle: {color: '#d1d8e0'}},name: '能耗（kWh）'},series: [{name: '2023年灌溉能耗',type: 'bar',data: barChartData.values1,itemStyle: {color: '#5470C6'},barWidth: '40%'},{name: '2024年灌溉能耗',type: 'bar',data: barChartData.values2,itemStyle: {color: '#91CC75'},barWidth: '40%'}]};barChartInstance.setOption(option);
};

4) 效果说明

  • 图表展示了2023年和2024年各月份的灌溉系统能耗对比。
  • 蓝色柱子代表2023年数据，绿色柱子代表2024年数据。
  • 鼠标悬停在柱子上时，会显示具体数值，方便对比分析。

四、实现堆叠曲线图

1) 场景描述

我们监控农业基地内不同设备（如灌溉泵、温室通风机、补光灯等）在一天中的能耗变化。通过堆叠曲线图，可以清晰地看到各设备在不同时间段的能耗占比，以及整体能耗的变化趋势。

2) 数据准备

const chartDataStacked = {categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],series: [{ name: '灌溉泵', data: [10, 20, 15, 25, 30, 22, 10, 20, 15, 25, 30, 22, 10, 20, 15, 25, 30, 22, 10, 20, 15, 25, 30, 22] },{ name: '温室通风机', data: [5, 15, 10, 20, 25, 17, 5, 15, 10, 20, 25, 17, 5, 15, 10, 20, 25, 17, 5, 15, 10, 20, 25, 17] },{ name: '补光灯', data: [8, 18, 13, 23, 28, 20, 8, 18, 13, 23, 28, 20, 8, 18, 13, 23, 28, 20, 8, 18, 13, 23, 28, 20] },{ name: '温控系统', data: [12, 22, 17, 27, 32, 24, 12, 22, 17, 27, 32, 24, 12, 22, 17, 27, 32, 24, 12, 22, 17, 27, 32, 24] }]
};

3) 图表配置与初始化

let stackedChartInstance = null;const initStackedChart = () => {const chartDom = document.getElementById('stackedLineChart');if (!chartDom) return;stackedChartInstance = echarts.init(chartDom);const option = {tooltip: {trigger: 'axis',backgroundColor: 'rgba(0, 0, 0, 0.7)',borderColor: '#333',textStyle: { color: '#fff' }},legend: {data: chartDataStacked.series.map(item => item.name),top: 30,textStyle: { color: '#333' }},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: chartDataStacked.categories,axisLine: {lineStyle: {color: '#d1d8e0'}}},yAxis: {type: 'value',name: '能耗（kWh）',axisLine: {lineStyle: {color: '#d1d8e0'}}},series: chartDataStacked.series.map(item => ({name: item.name,type: 'line',stack: '总量',smooth: true,lineStyle: {width: 2},data: item.data}))};stackedChartInstance.setOption(option);
};

4) 效果说明

  • 图表展示了灌溉泵、温室通风机、补光灯和温控系统在一天中的能耗变化。
  • 曲线采用堆叠方式，可以清晰地看到各设备在不同时间段的能耗占比。
  • 鼠标悬停在曲线上时，会显示具体数值和设备名称，方便分析。

五、完整代码

<template><div class="chart-container"><div id="barChart" class="chart"></div><div id="stackedLineChart" class="chart"></div></div>
</template><script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';// 柱状图数据 - 灌溉系统月度能耗对比
const barChartData = {categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],values1: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], // 2023年数据values2: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95, 105, 115]    // 2024年数据
};// 堆叠曲线图数据 - 农业设备24小时能耗变化
const chartDataStacked = {categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00','12:00', '13:00', '14:00', '15:00', '16:00', '17:00','18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],series: [{ name: '灌溉泵', data: [10, 20, 15, 25, 30, 22, 10, 20, 15, 25, 30, 22, 10, 20, 15, 25, 30, 22, 10, 20, 15, 25, 30, 22] },{ name: '温室通风机', data: [5, 15, 10, 20, 25, 17, 5, 15, 10, 20, 25, 17, 5, 15, 10, 20, 25, 17, 5, 15, 10, 20, 25, 17] },{ name: '补光灯', data: [8, 18, 13, 23, 28, 20, 8, 18, 13, 23, 28, 20, 8, 18, 13, 23, 28, 20, 8, 18, 13, 23, 28, 20] },{ name: '温控系统', data: [12, 22, 17, 27, 32, 24, 12, 22, 17, 27, 32, 24, 12, 22, 17, 27, 32, 24, 12, 22, 17, 27, 32, 24] }]
};let barChartInstance = null;
let stackedChartInstance = null;// 初始化柱状图
const initBarChart = () => {const chartDom = document.getElementById('barChart');if (!chartDom) return;barChartInstance = echarts.init(chartDom);const option = {title: {text: '灌溉系统月度能耗对比',left: 'center',textStyle: {color: '#333'}},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: params => {const data = params[0];return `${data.axisValue}<br/>${data.seriesName}: ${data.value}kWh`;}},legend: {data: ['2023年灌溉能耗', '2024年灌溉能耗'],top: 30,textStyle: {color: '#333'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: barChartData.categories,axisLine: {lineStyle: {color: '#d1d8e0'}},axisLabel: {color: '#666'}},yAxis: {type: 'value',name: '能耗（kWh）',nameTextStyle: {color: '#333'},splitLine: {lineStyle: {color: '#eee'}},axisLine: {lineStyle: {color: '#d1d8e0'}},axisLabel: {color: '#666'}},series: [{name: '2023年灌溉能耗',type: 'bar',data: barChartData.values1,itemStyle: {color: '#5470C6'},barWidth: '40%',label: {show: true,position: 'top',color: '#333'}},{name: '2024年灌溉能耗',type: 'bar',data: barChartData.values2,itemStyle: {color: '#91CC75'},barWidth: '40%',label: {show: true,position: 'top',color: '#333'}}]};barChartInstance.setOption(option);
};// 初始化堆叠曲线图
const initStackedChart = () => {const chartDom = document.getElementById('stackedLineChart');if (!chartDom) return;stackedChartInstance = echarts.init(chartDom);const option = {title: {text: '农业设备24小时能耗变化',left: 'center',textStyle: {color: '#333'}},tooltip: {trigger: 'axis',backgroundColor: 'rgba(0, 0, 0, 0.7)',borderColor: '#333',textStyle: { color: '#fff' },formatter: params => {let result = `${params[0].axisValue}<br/>`;params.forEach(item => {result += `${item.marker} ${item.seriesName}: ${item.value}kWh<br/>`;});return result;}},legend: {data: chartDataStacked.series.map(item => item.name),top: 30,textStyle: { color: '#333' }},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: chartDataStacked.categories,axis

总结

通过本文的介绍，我们学习了如何在Vue3中结合ECharts实现多系列柱状图和堆叠曲线图。柱状图适用于对比不同类别的数据，而堆叠曲线图则适合展示时间序列数据的变化趋势和占比。在实际项目中，可以根据具体需求调整图表配置，如颜色、标签、提示框等，以达到最佳的展示效果。

http://www.dtcms.com/a/281851.html

相关文章：

  • rocky8 --Elasticsearch+Logstash+Filebeat+Kibana部署【7.1.1版本】
  • 阿奇霉素：长效广谱抗菌背后的药理特性与研发历程
  • 利用Java自定义格式，循环导出数据、图片到excel
  • excel分组展示业绩及增长率
  • 解锁高效Excel技能：摆脱鼠标，快速编辑单元格
  • java操作Excel两种方式EasyExcel 和POI
  • DHTMLX Suite 9.2 重磅发布：支持历史记录、类Excel交互、剪贴板、拖放增强等多项升级
  • HTML进阶
  • Spring Boot 整合 Nacos 实战教程：服务注册发现与配置中心详解
  • 分布式弹性故障处理框架——Polly(1)
  • 卷积神经网络-卷积的分类
  • 数据结构与算法学习（一）
  • 从函数调用到进程通信：Linux下的多语言协作实践
  • STM32 | 定时器 PWM 呼吸灯
  • 坚持继续布局32位MCU，进一步完善产品阵容，96Mhz主频CW32L012新品发布！
  • 尚庭公寓-------图片上传接口
  • 推客系统开发：从零构建高并发社交平台的技术实践
  • Python爬虫实战：研究PyYAML库相关技术
  • 多维动态规划题解——不同路径【LeetCode】递推写法空间优化
  • 【Qt开发】Qt的背景介绍（二）-＞ 搭建Qt开发环境
  • 从混沌到秩序：数据科学的热力学第二定律破局——线性回归的熵减模型 × 最小二乘的能量最小化 × 梯度下降的负反馈控制系统，用物理定律重构智能算法的统一场论
  • Blender 云渲染高效流程：渲染 101 集群加速实战​
  • 硬件产品的技术资料管控是确保研发可追溯、生产可复制、质量可控制的核心环节。
  • Linux 716 数据库迁移
  • NodeJS Express 静态文件、中间件、路由案例
  • iPhone 数据擦除软件评测（最新且全面）
  • 为什么要使用nginx?
  • 网络基础10 业务访问控制--ACL与包过滤
  • springboot如何redis锁
  • python学习---dayday6