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

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

news 来源：原创 2025/6/17 10:36:05

文章目录

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

前言

在现代 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>

三、关键点解析

安装和导入 Chart.js：
- 使用 npm install chart.js 安装库。
- 在组件中使用 import Chart from 'chart.js/auto'; 导入。
设置饼图的基本配置：
- 使用 type: 'pie' 指定图表类型为饼图。
- 在 data 中定义 labels 和 datasets，其中 datasets 包含数据值和样式配置。
调整饼图外观：
- 使用 backgroundColor 设置每个部分的背景颜色。
- 设置 borderWidth: 0 去掉数据项之间的白色边框。
配置图例：
- 使用 plugins.legend.position: 'top' 将图例放置在饼图上方。
- 使用 labels.font.size 调整图例文字的大小。
样式和布局：
- 使用 SCSS 定义组件的样式，确保图表和统计信息的布局合理。