【web应用】在 Vue 3 中实现饼图：使用 Chart.js实现饼图显示数据分析结果

文章目录

• 前言
• 一、准备工作
• 二、实现饼图组件
• 三、关键点解析
• 四、实现效果
• 总结

---

前言

在现代 Web 应用中，数据可视化是不可或缺的一部分。无论是展示统计信息还是监控关键指标，图表都能帮助用户更直观地理解数据。在 Vue 3 项目中，我们可以使用 Chart.js 这个强大且灵活的库来创建各种类型的图表。本文将介绍如何在 Vue 3 中使用 Chart.js 实现一个简单的饼图，展示人员出勤情况。

一、准备工作

首先，确保你的 Vue 3 项目已经初始化。如果还没有，可以使用 Vue CLI 快速创建一个新项目：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

接下来，安装 Chart.js：

npm install chart.js

二、实现饼图组件

我们将创建一个组件来展示人员出勤情况的饼图。以下是一个完整的实现示例：

<template>
  <div class="app-container home">
    <!-- 人员信息模块 -->
    <div class="module personnel-info">
      <h3>人员信息</h3>
      <div class="content">
        <div class="chart-place">
          <canvas id="attendanceChart" width="300" height="300"></canvas>
        </div>
        <div class="personnel-stats">
          <div class="stat-item">
            <span>出勤人数</span>
            <strong>20</strong>
          </div>
          <div class="stat-item">
            <span>总人数</span>
            <strong>25</strong>
          </div>
          <div class="stat-item">
            <span>出勤率</span>
            <strong>80%</strong>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import Chart from 'chart.js/auto';

onMounted(() => {
  const ctx = document.getElementById('attendanceChart').getContext('2d');
  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['出勤', '未出勤'],
      datasets: [{
        data: [20, 5],
        backgroundColor: ['#5470C6', '#91CC75'], // 使用转换后的十六进制颜色
        hoverBackgroundColor: ['#3A8EFD', '#7CB342'],
        borderWidth: 0 // 去掉白色边框
      }]
    },
    options: {
      responsive: false, // 禁用响应式，以便手动设置大小
      maintainAspectRatio: false, // 禁用宽高比保持
      plugins: {
        legend: {
          position: 'top', // 将图例放置在饼图上方
          labels: {
            color: '#A6CAF4', // 图例文字颜色
            font: {
              size: 14 // 设置图例文字的大小
            }
          }
        }
      }
    }
  });
});
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: transparent;
  color: #fff;
}

.module {
  background-color: transparent;
  border-radius: 5px;
  padding-top: 5px;
  padding-left: 45px;
  padding-right: 30px;
  flex: 1;

  h3 {
    color: #A6CAF4;
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: bold;
    display: inline-block;
    background-image: url('@/assets/images/光环2.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 5px;
    background-position: left 20px;
  }
}

.personnel-info {
  background-image: url('@/assets/images/组合 64.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  position: absolute;
  top: 70px;
  left: 30px;
  width: 500px;
  height: 365px;

  .content {
    display: flex;
  }

  .chart-place {
    display: flex;
    height: 250px;
    width: 60%;
    justify-content: center;
    align-items: center;
  }

  .personnel-stats {
    display: flex;
    flex-wrap: wrap;
    width: 40%;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    .stat-item {
      width: 100%;
      margin-bottom: 20px;
      background-color: rgba(0, 51, 102, 0.5);
      border-radius: 8px;
      padding: 9px;

      span {
        display: block;
        color: #A6CAF4;
        font-size: 17px;
        margin-bottom: 5px;
        text-align: center;
      }

      strong {
        display: block;
        font-size: 25px;
        color: #00b7ee;
        text-align: center;
      }
    }
  }
}
</style>

三、关键点解析

1. 安装和导入 Chart.js：

   • 使用 npm install chart.js 安装库。
   • 在组件中使用 import Chart from 'chart.js/auto'; 导入。

2. 设置饼图的基本配置：

   • 使用 type: 'pie' 指定图表类型为饼图。
   • 在 data 中定义 labels 和 datasets，其中 datasets 包含数据值和样式配置。

3. 调整饼图外观：

   • 使用 backgroundColor 设置每个部分的背景颜色。
   • 设置 borderWidth: 0 去掉数据项之间的白色边框。

4. 配置图例：

   • 使用 plugins.legend.position: 'top' 将图例放置在饼图上方。
   • 使用 labels.font.size 调整图例文字的大小。

5. 样式和布局：

   • 使用 SCSS 定义组件的样式，确保图表和统计信息的布局合理。

四、实现效果

总结

在 Vue 3 中使用 Chart.js 创建饼图是一个简单而有效的方法来可视化数据。通过配置选项，你可以轻松调整图表的外观和行为，以满足你的需求。希望本文能帮助你更好地理解如何在 Vue 3 项目中集成和使用 Chart.js。

如果你对 Chart.js 的更多功能和配置选项感兴趣，可以查阅 Chart.js 官方文档。