在纯CSS环境下实现圆形比例数据气泡图，核心是利用CSS的圆锥渐变划分比例区域，结合伪元素和定位实现气泡的层级与大小控制，不需要依赖任何第三方可视化库，适配轻量数据展示场景。
核心实现原理
圆形比例展示的基础是conic-gradient圆锥渐变，它可以按照角度划分圆形的颜色区域，天然适配比例展示需求。气泡的大小则通过数据值映射为对应的宽高尺寸，多个气泡通过绝对定位叠加在容器上即可。
基础圆形比例容器实现
首先创建一个圆形容器，使用圆锥渐变划分不同分类的比例，每个颜色段的角度对应分类的占比值。
/* 圆形比例容器基础样式 */
.pie-container {
width: 200px;
height: 200px;
border-radius: 50%;
/* 假设三个分类占比分别为30%、50%、20% */
background: conic-gradient(
#4CAF50 0% 30%,
#2196F3 30% 80%,
#FFC107 80% 100%
);
position: relative;
}
气泡大小映射逻辑
气泡的大小需要根据数据值动态计算，这里我们可以通过CSS变量传递数据值，再通过calc函数计算对应的宽高。假设数据值范围是0到100，最大气泡尺寸为120px，最小为40px。
/* 气泡基础样式 */
.bubble {
border-radius: 50%;
position: absolute;
/* 通过CSS变量接收数据值，计算尺寸 */
width: calc(var(--value) / 100 * 80px + 40px);
height: calc(var(--value) / 100 * 80px + 40px);
opacity: 0.8;
cursor: pointer;
transition: transform 0.3s ease;
}
/* 气泡悬浮放大效果 */
.bubble:hover {
transform: scale(1.1);
opacity: 1;
}
完整示例代码
下面是一个包含三个分类气泡的完整示例，气泡位置通过top和left属性手动调整，实际项目中可以通过JS动态计算位置避免重叠。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS圆形比例数据气泡图</title>
<style>
.chart-wrapper {
width: 300px;
height: 300px;
position: relative;
margin: 50px auto;
}
.pie-base {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#4CAF50 0% 30%,
#2196F3 30% 80%,
#FFC107 80% 100%
);
position: absolute;
top: 50px;
left: 50px;
}
.bubble {
border-radius: 50%;
position: absolute;
opacity: 0.8;
cursor: pointer;
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
}
.bubble:hover {
transform: scale(1.1);
opacity: 1;
}
/* 第一个气泡：分类A，值30 */
.bubble-a {
--value: 30;
width: calc(var(--value) / 100 * 80px + 40px);
height: calc(var(--value) / 100 * 80px + 40px);
background-color: #4CAF50;
top: 20px;
left: 80px;
}
/* 第二个气泡：分类B，值50 */
.bubble-b {
--value: 50;
width: calc(var(--value) / 100 * 80px + 40px);
height: calc(var(--value) / 100 * 80px + 40px);
background-color: #2196F3;
top: 120px;
left: 30px;
}
/* 第三个气泡：分类C，值20 */
.bubble-c {
--value: 20;
width: calc(var(--value) / 100 * 80px + 40px);
height: calc(var(--value) / 100 * 80px + 40px);
background-color: #FFC107;
top: 140px;
left: 160px;
}
</style>
</head>
<body>
<div class="chart-wrapper">
<div class="pie-base"></div>
<div class="bubble bubble-a">30%</div>
<div class="bubble bubble-b">50%</div>
<div class="bubble bubble-c">20%</div>
</div>
</body>
</html>
注意事项
- 圆锥渐变的兼容性：部分旧版本浏览器不支持
conic-gradient，如果需要兼容可以改用多个旋转伪元素叠加实现比例分割。 - 气泡重叠问题：手动调整位置仅适合少量气泡场景，数据量较多时建议通过JS计算非重叠位置。
- 比例精度：圆锥渐变的百分比是相对于整个圆周的角度，计算时确保各段比例总和为100%避免出现空白区域。