Vue3绘制多系列柱状图与曲线图的示例代码
更新时间：2025年07月17日 10:52:01 作者：JosieBook
在数据可视化领域,图表是展示复杂数据的重要工具,本文将详细介绍如何在Vue3中实现两种常见的图表类型,多系列柱状图和堆叠曲线图,并结合实际场景进行数据展示
一、引言
在数据可视化领域，图表是展示复杂数据的重要工具。在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}
${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}
`;
params.forEach(item => {
result += `${item.marker} ${item.seriesName}: ${item.value}kWh
`;
});
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实现多系列柱状图和堆叠曲线图。柱状图适用于对比不同类别的数据，而堆叠曲线图则适合展示时间序列数据的变化趋势和占比。在实际项目中，可以根据具体需求调整图表配置，如颜色、标签、提示框等，以达到最佳的展示效果。
到此这篇关于Vue3绘制多系列柱状图与曲线图的示例代码的文章就介绍到这了,更多相关Vue3绘图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
这篇文章主要介绍了vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue简单的二维数组循环嵌套方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了Vuex实现数据共享的方法,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue3的setup的使用和原理,结合实例形式详细分析了vue3 setup的基本功能、原理与使用方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了分享一个vue项目“脚手架”项目的实现步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧2024-03-03
本文主要介绍了Vue中如何实现动态路由的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)
这篇文章主要介绍了Vue3 父组件调用子组件方法（$refs 在setup()、＜script setup＞ 中使用）,在 vue2 中 ref 被用来获取对应的子元素，然后调用子元素内部的方法，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
我们知道在vue中每个页面都需要在路由中声明,下面这篇文章主要给大家介绍了关于vue路由跳转携带参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了使用Vue3实现pdf在线预览的三种常用方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-02-02
最新评论