Vue3繪制多系列柱狀圖與曲線圖的示例代碼

更新時間：2025年07月17日 10:52:01 作者：JosieBook

在數(shù)據(jù)可視化領域,圖表是展示復雜數(shù)據(jù)的重要工具,本文將詳細介紹如何在Vue3中實現(xiàn)兩種常見的圖表類型,多系列柱狀圖和堆疊曲線圖,并結合實際場景進行數(shù)據(jù)展示

一、引言

在數(shù)據(jù)可視化領域，圖表是展示復雜數(shù)據(jù)的重要工具。在Vue3項目中，結合ECharts庫，我們可以輕松實現(xiàn)各種類型的圖表展示，幫助用戶更直觀地理解數(shù)據(jù)背后的規(guī)律。本文將詳細介紹如何在Vue3中實現(xiàn)兩種常見的圖表類型：多系列柱狀圖和堆疊曲線圖，并結合實際場景進行數(shù)據(jù)展示。

二、項目背景

假設我們正在開發(fā)一個智能農(nóng)業(yè)監(jiān)控系統(tǒng)，需要展示不同農(nóng)業(yè)設備的能耗數(shù)據(jù)以及不同大棚的溫度變化數(shù)據(jù)。系統(tǒng)需要展示兩種類型的圖表：

多系列柱狀圖：展示不同月份下，兩個不同年份的灌溉系統(tǒng)能耗對比。
堆疊曲線圖：展示不同農(nóng)業(yè)設備在一天中的能耗變化趨勢。

三、實現(xiàn)多系列柱狀圖

1) 場景描述

我們監(jiān)控某農(nóng)業(yè)基地的月度灌溉系統(tǒng)能耗數(shù)據(jù)，對比2023年和2024年各月份的能耗情況。通過柱狀圖，可以直觀地看到不同年份同一月份的能耗差異，幫助分析能耗變化趨勢。

2) 數(shù)據(jù)準備

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年數(shù)據(jù)
  values2: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95, 105, 115]    // 2024年數(shù)據(jù)
}

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年各月份的灌溉系統(tǒng)能耗對比。
藍色柱子代表2023年數(shù)據(jù)，綠色柱子代表2024年數(shù)據(jù)。
鼠標懸停在柱子上時，會顯示具體數(shù)值，方便對比分析。

四、實現(xiàn)堆疊曲線圖

1) 場景描述

我們監(jiān)控農(nóng)業(yè)基地內不同設備（如灌溉泵、溫室通風機、補光燈等）在一天中的能耗變化。通過堆疊曲線圖，可以清晰地看到各設備在不同時間段的能耗占比，以及整體能耗的變化趨勢。

2) 數(shù)據(jù)準備

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: '溫控系統(tǒng)', 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) 效果說明

圖表展示了灌溉泵、溫室通風機、補光燈和溫控系統(tǒng)在一天中的能耗變化。
曲線采用堆疊方式，可以清晰地看到各設備在不同時間段的能耗占比。
鼠標懸停在曲線上時，會顯示具體數(shù)值和設備名稱，方便分析。

五、完整代碼

<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';

// 柱狀圖數(shù)據(jù) - 灌溉系統(tǒng)月度能耗對比
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年數(shù)據(jù)
  values2: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95, 105, 115]    // 2024年數(shù)據(jù)
};

// 堆疊曲線圖數(shù)據(jù) - 農(nóng)業(yè)設備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: '溫控系統(tǒng)', 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: '灌溉系統(tǒng)月度能耗對比',
      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: '農(nóng)業(yè)設備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實現(xiàn)多系列柱狀圖和堆疊曲線圖。柱狀圖適用于對比不同類別的數(shù)據(jù)，而堆疊曲線圖則適合展示時間序列數(shù)據(jù)的變化趨勢和占比。在實際項目中，可以根據(jù)具體需求調整圖表配置，如顏色、標簽、提示框等，以達到最佳的展示效果。

到此這篇關于Vue3繪制多系列柱狀圖與曲線圖的示例代碼的文章就介紹到這了,更多相關Vue3繪圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: