CSS收入支出图是一种直观展示收支数据的可视化工具，通过时间轴（月度/季度）呈现收入来源与支出项目，清晰对比收支差额及占比情况，其样式设计灵活，适配多终端显示，便于用户快速掌握财务动态，适用于个人理财规划、企业预算管理等场景，通过数据化分析辅助优化收支结构，提升资金管理效率，是实现财务透明化与决策科学化的实用工具。
用CSS打造轻量级收入支出可视化图表
在个人财务管理或企业收支分析中,直观展示收入与支出情况至关重要，相比传统的表格数据，图表能让数据趋势、占比关系一目了然，帮助用户快速把握财务状况，提到图表实现，很多人会想到JavaScript库（如Chart.js、ECharts），但今天我们要探讨一种更轻量的方案——用纯CSS实现收入支出图，这种方法无需额外依赖，加载速度快，样式高度可控，尤其适合简单的收支展示场景，同时也能保持良好的用户体验。
为什么选择CSS做收入支出图？
CSS作为前端样式语言,在图表可视化中有着独特优势：
-
轻量无依赖：不需要引入外部JS库，减少页面体积，提升加载速度，对于只需要展示基础财务数据的场景，可以减少不必要的资源加载。
-
样式高度可控：通过CSS类名可直接调整颜色、间距、动画等，与设计系统无缝集成，可以根据品牌规范轻松定制图表外观。
-
性能友好：CSS渲染由浏览器优化，即使是复杂动画也能保持流畅，在数据量不大时，CSS图表的渲染性能往往优于JavaScript方案。
-
简单场景够用：对于静态或半静态的收支数据（如月度收支统计、年度占比分析），CSS完全能满足基础可视化需求，且实现成本更低。
-
易于维护：纯CSS实现的图表代码结构清晰，后期维护和修改相对简单，不需要处理复杂的JavaScript逻辑。
CSS收入支出图的常见类型及实现
柱状图：对比不同周期的收支差异
柱状图是展示收支趋势最常用的形式,通过柱子高度直观反映数值大小，这种图表特别适合展示时间序列数据，如月度或季度收支对比。
实现思路：
用div表示柱子，通过height属性按比例设置数值（如最大值对应100%高度），用flex或grid布局排列柱子，不同颜色区分收入（如绿色）和支出（如红色），可以添加过渡动画增强交互体验。
示例代码：
<div class="chart-container">
<h3>2023年上半年收支统计</h3>
<div class="bar-chart">
<div class="bar-wrapper">
<div class="bar income" style="height: 80%"></div>
<span class="label">1月</span>
<span class="value">收入8万</span>
</div>
<div class="bar-wrapper">
<div class="bar expense" style="height: 60%"></div>
<span class="label">1月</span>
<span class="value">支出6万</span>
</div>
<div class="bar-wrapper">
<div class="bar income" style="height: 85%"></div>
<span class="label">2月</span>
<span class="value">收入8.5万</span>
</div>
<div class="bar-wrapper">
<div class="bar expense" style="height: 65%"></div>
<span class="label">2月</span>
<span class="value">支出6.5万</span>
</div>
<div class="bar-wrapper">
<div class="bar income" style="height: 90%"></div>
<span class="label">3月</span>
<span class="value">收入9万</span>
</div>
<div class="bar-wrapper">
<div class="bar expense" style="height: 70%"></div>
<span class="label">3月</span>
<span class="value">支出7万</span>
</div>
</div>
</div>
.chart-container {
width: 600px;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.bar-chart {
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 300px;
border-left: 2px solid #ddd;
border-bottom: 2px solid #ddd;
padding: 10px;
position: relative;
}
.bar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
}
.bar {
width: 30px;
background: linear-gradient(to top, #4CAF50, #81C784);
border-radius: 3px 3px 0 0;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
min-height: 5px;
}
.bar.expense {
background: linear-gradient(to top, #F44336, #E57373);
}
.bar:hover {
transform: translateY(-5px);
opacity: 0.9;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.bar::after {
content: attr(data-value);
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}
.bar:hover::after {
opacity:
