「简记往来」开发历程系列：纯CSS图表在小程序中的实践

一、为什么不用ECharts？

简记往来需要一个报表页面，展示收支趋势、分类排行等数据。

最常规的做法是用ECharts------功能强大、图表类型丰富、文档完善。

但我最终没有用ECharts，原因只有一个：包体积。

ECharts的最小打包体积约200KB，对于一个小程序来说，这个体积不小。而且简记往来只需要折线图、柱状图、环形图三种图表类型，用ECharts属于"杀鸡用牛刀"。

于是我开始研究：能不能用纯CSS实现图表？

二、纯CSS图表的实现原理

纯CSS图表的思路其实很简单：

用 div 作为柱子，高度动态绑定数据值
用 flex 或 grid 布局排列柱子
用 border-radius 控制样式
用 transform 做动画

核心代码（柱状图）：

html 复制代码

<div class="chart-container">
  <div class="bar" style="height: {{barHeight}}px;"></div>
  <div class="bar-label">{{label}}</div>
</div>

css 复制代码

.chart-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
}

.bar {
  width: 30px;
  background: var(--primary-color);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

折线图稍微复杂一些，需要用多个 div 拼接成折线，或者用 clip-path 实现。

三、三种图表的实现

折线图 ：用多个点 + SVG的 polyline 或 path。简记往来用的是 div + transform: rotate() 模拟线段连接。

柱状图 ：最直接，柱子高度绑定数据，用 flex 排列。

环形图 ：用 conic-gradient 实现。根据各分类的占比计算角度，拼接成完整的环形。

四、实际效果展示

纯CSS图表的优势在小程序上非常明显：

加载速度快：不需要加载任何第三方库，页面打开即渲染
包体积小：整个图表模块的CSS代码不到5KB
可控性强：样式完全自定义，不受第三方库限制

当然也有局限：复杂的图表（如散点图、热力图）很难用纯CSS实现。但对简记往来的使用场景来说，三种图表已经足够了。

五、适合谁参考？

如果你在做的小程序只需要基础的图表展示（趋势图、排行图、占比图），纯CSS方案值得考虑。

如果你的需求比较复杂（交互式图表、大数据量渲染），还是老老实实用ECharts。

简记往来选择纯CSS，是因为"够用就好"。对一个小程序来说，少200KB的包体积，意味着更快的加载速度和更好的用户体验。