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

文章目录

• • 一、引言
  • 二、项目背景
  • 三、实现多系列柱状图
  • • 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) 效果说明

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

五、完整代码

 
 
 
 
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实现多系列柱状图和堆叠曲线图。柱状图适用于对比不同类别的数据，而堆叠曲线图则适合展示时间序列数据的变化趋势和占比。在实际项目中，可以根据具体需求调整图表配置，如颜色、标签、提示框等，以达到最佳的展示效果。