环形饼图是基于JavaScript实现的数据可视化图表，是传统饼图的衍生形式，中心留白可附加额外信息，通过ECharts、Chart.js等库可快速开发，支持动态数据绑定、交互提示（如悬停显示数值）、自定义样式（颜色、标签、动画）及响应式布局，其核心优势在于直观展示数据占比关系，节省空间的同时增强信息承载能力，广泛应用于数据仪表盘、分析报告、网页统计等场景，帮助用户快速洞察数据分布特征。
用JavaScript打造交互式环形饼图：从基础到进阶
在数据可视化领域，环形饼图（Donut Chart）凭借其独特的环形结构，既能直观展示各部分数据的占比关系，又能利用中心区域展示汇总信息或关键指标，已成为仪表盘、报表分析等场景下的重要可视化工具，本文将围绕"环形饼图js"，从核心概念、技术选型到具体实现,带你一步步掌握用JavaScript打造交互式环形饼图的方法。
环形饼图：不止于"好看"的数据展示
环形饼图本质上是饼图的变体，通过将中心区域"挖空"形成环形结构，相比传统饼图,它具有以下显著优势：
- 信息密度更高：中心区域可显示总计、平均值等关键数据，避免额外图例占用空间,使图表更加紧凑高效。
- 视觉层次更清晰：环形结构让各扇区的边界更加明确，尤其在多分类数据对比时,能够减少视觉混淆。
- 交互体验更友好：中心空洞可作为"交互热区"，点击或悬停时触发动态效果，如数据详情弹窗、中心内容更新等。
常见的应用场景包括：
- 电商平台的销售占比分析
- 系统监控的资源使用率展示
- 问卷调查的结果统计
- 企业财务报表的构成分析
技术选型：用什么工具实现环形饼图？
JavaScript实现环形饼图的核心思路是"绘图+交互"，目前主流方案分为三类,开发者可根据项目需求灵活选择：
轻量级图表库：Chart.js
特点：体积小（压缩后约30KB）、API简洁、支持开箱即用的交互（hover、点击动画）,适合快速开发。
优势：内置环形饼图配置，只需修改cutout属性（控制内半径）即可实现环形效果，对新手友好，文档完善,社区活跃。
适用场景：中小型项目、数据展示为主的应用、需要快速上线的场景。
功能强大的可视化库：ECharts
特点：百度开源，功能丰富（支持3D、动态数据、自定义组件），文档完善,适合复杂可视化场景。
优势：环形饼图的样式（如标签位置、图例联动）和交互（如高亮、数据下钻）可高度定制，支持数据动态更新,适合企业级项目。
适用场景：大型数据平台、需要复杂交互的可视化系统、对图表美观度要求高的项目。
原生Canvas/SVG：追求极致性能或定制化
特点：直接通过Canvas或SVG API绘图，无第三方依赖,适合对性能或交互细节有极致要求的场景。
优势：
- 完全控制图形渲染细节
- 可实现复杂动画效果
- 适合高频数据更新场景
- 可集成到已有系统中
挑战：需手动处理图形绘制、事件绑定，代码量较大,适合有经验的开发者。
适用场景：游戏化数据展示、实时监控系统、需要特殊动画效果的应用。
本文以Chart.js为例（兼顾易用性与功能性）,演示环形饼图的完整实现流程。
实战：用Chart.js打造交互式环形饼图
步骤1：环境准备
通过CDN引入Chart.js（也可通过npm安装）：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
准备一个canvas元素作为图表容器：
<div style="position: relative; width: 400px; height: 400px;"> <canvas id="donutChart"></canvas> </div>
步骤2：定义数据与配置
环形饼图的核心是"数据"和"样式配置"，假设我们要展示"某平台用户设备占比"数据：
const data = {
labels: ['手机', '电脑', '平板', '其他'], // 扇区标签
datasets: [{
data: [45, 30, 20, 5], // 各部分数值
backgroundColor: [
'#FF6384', // 红色 - 手机
'#36A2EB', // 蓝色 - 电脑
'#FFCE56', // 黄色 - 平板
'#4BC0C0' // 青色 - 其他
],
borderWidth: 2, // 扇区边框宽度
borderColor: '#fff', // 边框颜色
hoverOffset: 10 // 鼠标悬停时的偏移量
}]
};
关键配置项：
cutout：控制环形内半径，支持像素值或百分比（如'50%'表示内半径为外半径的50%）hoverOffset：鼠标悬停时扇区向外扩展的距离，增强交互体验
步骤3：创建环形饼图实例
通过Chart构造函数创建图表实例，指定类型为'doughnut'：
const ctx = document.getElementById('donutChart').getContext('2d');
const donutChart = new Chart(ctx, {
type: 'doughnut', // 图表类型：环形饼图
data: data,
options: {
responsive: true, // 响应式布局
maintainAspectRatio: false, // 不保持宽高比（可自定义容器尺寸）
cutout: '50%', // 环形内半径（核心配置）
animation: {
animateRotate: true, // 启用旋转动画
animateScale: true // 启用缩放动画
},
plugins: {
legend: {
position: 'bottom', // 图例位置：底部
labels: {
padding: 20, // 图例项间距
font: {
size: 14
},
generateLabels: function(chart) {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const dataset = data.datasets[0];
const value = dataset.data[i];
const total = dataset.data.reduce((a, b) => a + b, 0);
const percentage = ((value / total) * 100).toFixed(1);
return {
text: `${label}: ${value} (${percentage}%)`,
fillStyle: dataset.backgroundColor[i],
strokeStyle: dataset.borderColor,
lineWidth: dataset.borderWidth,
hidden: false,
index: i
};
});
}
return [];
}
}
},
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.parsed || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = ((value / total) * 100).toFixed(1);
return `${label}: ${value} (${percentage}%)`;
}
}
}
},
// 交互配置
onHover: (event, activeElements) => {
event.native.target.style.cursor = activeElements.length > 0 ? 'pointer' : 'default';
},
onClick: (event, activeElements) => {
if (activeElements.length > 0) {
const index = activeElements[0].index;
const label = data.labels[index];
const value = data.datasets[0].data[index];
alert(`点击了${label}，占比：${value}%`);
}
}
}
});
步骤4：效果优化与进阶交互
（1）中心显示汇总数据
环形饼图的中心区域可通过"插件"或"HTML覆盖"添加文本,在canvas中心叠加一个div：
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%
标签： #js
