css面积图制作
使用 CSS 制作面积图
面积图是一种展示数据随时间或其他连续变量变化的可视化方式。以下介绍两种常见的实现方法：
方法一：纯 CSS + HTML 结构
通过叠加多个 div 元素模拟面积图效果，适合简单场景。
<div class="area-chart">
<div class="area series-1" style="height: 60%"></div>
<div class="area series-2" style="height: 40%"></div>
</div>.area-chart {
position: relative;
width: 300px;
height: 200px;
background-color: #f5f5f5;
}
.area {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(75, 192, 192, 0.5);
transition: height 0.3s ease;
}
.series-1 { background-color: rgba(75, 192, 192, 0.5); }
.series-2 { background-color: rgba(54, 162, 235, 0.5); }方法二：CSS 结合 SVG
更灵活的方案，支持复杂曲线和动画：
<svg class="area-svg" viewBox="0 0 300 200">
<path class="area-path" d="M0,200 L30,150 L60,120 L90,180 L120,100 L150,50 L180,80 L210,120 L240,140 L270,90 L300,200 Z"/>
</svg>.area-svg {
width: 300px;
height: 200px;
}
.area-path {
fill: rgba(75, 192, 192, 0.5);
stroke: #4bc0c0;
stroke-width: 2;
transition: d 0.5s ease;
}进阶技巧
- 数据绑定：通过 JavaScript 动态计算
height或 SVG 路径的d属性 - 响应式设计：使用
vw/vh单位或calc()实现自适应 - 动画效果：添加 CSS
transition或@keyframes实现平滑过渡 - 多系列叠加：使用
mix-blend-mode: multiply实现颜色混合效果
注意事项
- 复杂数据可视化建议使用专业库（如 Chart.js、D3.js）
- 移动端需测试触摸事件兼容性
- 考虑使用 CSS 变量（
--data-height）动态控制样式
以上方法可根据实际需求选择，SVG 方案更适合需要精确控制路径的场景。
