不少企业站的「数据展示」可能只有三个数字：服务客户 1200 家、成立 8 年、覆盖 30 城。为了让这三个数字动起来，页面上挂了一个几百 KB 的图表库。
另一头也有走反的：后台要画一张随时间刷新的折线，结果有人用 div 的高度硬撑，改一次需求改半天。
图表这件事没有「最佳实践」，只有分量。下面 15 款按分量从轻到重排成一条线，从一行简单 CSS 能画完的，一直排到要拉 WebGL 重量级组件的。你先想清楚自己那张图要承担什么，再决定从哪一档往下看。
—— 第一档 · 一个库都不引 ——
这一档的共同前提是：数据是死的，或者极少变。写在 HTML 里，改的时候手动改。能接受这一点，纯 CSS 就够了，而且它是这一页里加载最快、最不会出错的一档。
01. conic-gradient 画的饼图：一个函数，一张图
纯 CSS conic-gradient CSS 变量控制比例
原理就是 conic-gradient() 按角度铺色，再用 CSS 变量把每一块的颜色和占比抽出来。改数据等于改变量，不碰结构。
兼容性可以放心：caniuse 记的全球支持率是 96.44%，Chrome 69（2018）、Safari 12.1（2019）、Firefox 83（2020）先后跟进，现在只剩 IE 和 Opera Mini 不认。
它的天花板也很清楚：没有坐标轴，没有悬停提示，没有图例联动。它画的是比例，不是图表。占比、完成度这类一眼看完的东西它扛得住；一旦读者要问「具体是多少」，就该往下翻了。
02. 同一个思路的五种长相，其中两款会转
技术底子和上一款一样，胜在给了五种成品样式，其中两款带加载进度动画——数值从 0 转到目标值那种。做「本月完成率」这类单指标展示，直接挑一款改颜色就走。
要注意带进度动画的那两款：转动过程只是动画，不代表数据在变，终点才是真实值。拿它去表现「实时进度」会误导人。
只需要一张饼，看上一款的原理；要在一个后台里铺五六张不同的比例图，这一款省事。
03. CSS Grid 摆出来的柱状图：标签斜着放，省一半横向空间
CSS Grid writing-mode 旋转标签 数据绑定用 Vue
柱子由 Grid 排列，高度直接由数据撑，X 轴标签用 writing-mode 转成斜的——这一手解决的是柱子一多标签就叠在一起的老问题，比塞一个图表库轻太多。
要提醒一句：它叫「原生 CSS」，指的是画图不用 Canvas、不引图表库，但数据绑定那一层用的是 Vue，改数据图表自动更新也是 Vue 给的。你要是打算放进一个纯静态页里，这部分得自己换掉。
作者自己划了两条线，都很实在：柱子控制在 30 根以内；要做悬停看详情、点击动态排序这类交互，还是得配 JS。
04. 倒着长的柱状图
柱子从顶上垂下来而不是从底下长上去，配翠绿渐变和一点投影。这是把图表当装饰用的做法——放在品牌页、年报页面里当视觉元素合适，真要给人读数字就别选它，倒挂的方向会让人多想一秒。
05. 横向条形图：本来就是给「技能」用的
条形依次入场的交错动画，视觉上比一次全出来舒服。详情页里给了完整的 HTML 和 CSS 写法，跟着改就行。
它的数据是写在 class 名上的——l--25 就是 25%，换数字等于换类名。这在作品集、简历页上完全够用（它原本就是为这个场景做的），但别指望用它接后端数据。
06. 仪表盘，指针会转，还带光影
纯 CSS 做的 3D 仪表盘，指针旋转配光影变化。适合单指标的「当前状态」，比如服务器负载。
纯 CSS 的代价在刻度上：表盘的刻度和角度都固化在样式里，要把量程从 0–100 改成 0–240，或者加一段红色危险区，得回去挨个调角度值。有这个需求，直接看下一款。
—— 第二档 · 开始用 SVG ——
轮到 SVG 的信号有两个：图形本身不规则（地图、曲线、异形刻度），或者需要按路径描边做动画。这两件事 CSS 做不了，图表库又杀鸡用牛刀。
07. 速度表：SVG 画刻度，JS 转指针
和第 06 款是同一类东西的两种做法。差别在于这一款的刻度是 SVG 画的，所以刻度数量、起止角度、颜色分段都能按需求改，而不是被一套固定的 CSS 形状框住。要接真实数据（性能监控、实时读数），选这一款。
08. 世界地图，悬停出国家名
地图是一整张 SVG，每个国家一个路径，高亮、提示都是给路径加类名和事件。做「我们的业务覆盖这些国家」这种展示合适，不用拖一个地图框架进来。
它是静态底图加交互，不是数据图层。你想按数值给国家上不同深浅的颜色（也就是所谓的分级填色图），得自己写那层映射逻辑；要在地图上撒点、做聚合，那是第 13、14 款的活。
09. 节点连线信息图：先长线，再弹节点
SVG 路径描边 GSAP + ScrollTrigger
中心一个图标，左右各三个节点，六条贝塞尔曲线把它们连起来。播放顺序是关键：连线先从中心描出来，节点再错峰弹出，看上去就像能力从中心往外辐射；要是所有元素一起淡入，这个意思就没了。
之后节点进入呼吸式浮动，上下反向、周期互不相同，所以不会出现六个节点同时浮到最高点的那一帧。代码量不大，换掉图标和文案就能复用。
—— 第三档 · 该请库了 ——
什么时候值得引一个库？我的判断是这三条里中了任意一条：数据来自接口、图表类型会变、需要 tooltip 和图例这类成套交互。
10. 一个只画条形图的小库
图形还是 CSS 渲染的，JS 只负责接数据和配置项：纵轴标题、图表标题、颜色、尺寸都能配。也可以当 jQuery 插件单独用，定义一个 div、调一次初始化方法就出图。
它只画条形图，别的一概不管。后台里就一两张柱状图的话，引它比引一整套图表库合理得多。
11. 手机上能划着看的数据卡片
它解决的是另一个问题：数据面板在手机上怎么看。不同时间周期做成了可以手势滑动切换的卡片，划一下换一个周期，转化率、走势图、提示文案同步更新——注意是划，不是去点一个小箭头，手机上这个差别很大。外观是深色渐变配玻璃质感。
它用的是原生 HTML5 + CSS3 + JS，没有框架依赖。做移动端优先的数据展示，这个形态比把桌面版图表硬缩小靠谱。
12. ECharts 实时折线：一个可以照抄的完整例子
Apache ECharts 含分步代码
画的是电压随时间变化的动态折线，用定时器模拟实时数据，X 轴推时间、Y 轴推数值。详情页里从引入 echarts.min.js、定义容器 div、到初始化实例和定时推数据，四步都有代码。
真正难的从来不是画一条折线，是数据不停进来的时候怎么保持流畅——推多少点、多久刷一次、旧数据什么时候丢。这个例子把这套循环写完整了，改成你自己的接口就能跑。作者原本是拿它监控电压的。
—— 第四档 · 真数据、真地图 ——
最后三款和前面十二款不是一个量级。它们要处理的是真实数据源、地理投影和成千上万个点，代价换来的是前面几档做不到的信息密度。
13. Leaflet 自定义底图：亮点在它挂了的时候还能用
Leaflet GoogleMutant 插件 自动降级到 CARTO
表面上卖点是十几套地图配色一键切换，从素净浅色到夜间深色都有。但值得抄的是它的容错：密钥和样式数据分两条路取，各有代理和直填两种方式，每一步都设了超时；任何一环挂了——密钥拿不到、谷歌接口连不上、样式加载失败——自动退回 CARTO 的公开底图，地图照常能用，不白屏。
这个设计在国内环境里几乎是必需的。顺带一提，Leaflet 官网现在挂的是 2.0.0-alpha.1（2025 年 8 月 16 日发布），自述体积「约 42 KB 的 JS」，在地图框架里算轻的。
另一个值得抄的做法：密钥走服务端代理，没有写死在前端。配置项也集中在文件开头一个对象里，中心坐标、缩放级别、超时时间都在那儿改。
14. 接着官方地震接口刷新的大屏
D3.js + TopoJSON USGS 官方接口 5 分钟自动刷新
气泡大小代表震级，颜色深浅代表震源深度，两个维度叠在一张图上，哪里震得猛、震得深一眼看得出。数据直连美国地质调查局的 GeoJSON 接口，每 5 分钟拉一次，统计面板同步显示事件总数和最大震级。
它也是学 D3 地理投影和实时数据绑定的一个好样本——这两件事单看文档不容易明白，看一个跑起来的完整页面快得多。要用在正式项目里，记得先确认那个外部接口在你的网络环境下取不取得到。
15. 四万条观测记录铺成的一张地图
Canvas + WebGL 4 万+ 数据点
1870 年至今四万多条全球生物发光现象的观测记录，全部按经纬度打在一张暗色世界地图上。左侧可以按门类筛选（节肢动物、刺胞动物等），悬停某个点会弹出物种名、发现深度和年份。
点到这个量级，DOM 和 SVG 都撑不住，只能交给 Canvas 和 WebGL——这是这一档存在的理由。代价也得摆在前面：首屏要把四万个点画完，手机上尤其明显。真要上线，先决定按视口裁多少数据，别指望它原样搬到移动端。
照着这张表往下走
回到开头那个问题：一个饼图要不要引图表库？下面这四句是我给的判断顺序，从上往下问，第一个答「是」的那档就是你该待的地方。
数据写死、就一两张、只看比例 → 停在第一档。第 01、02 款，几行 CSS，零依赖。
图形不规则，或者要按路径做动画 → 第二档。地图、异形刻度、节点连线，SVG 是最省的解。
数据来自接口，或者图表类型以后会变 → 第三档。只画柱子就用第 10 款，要一整套坐标轴和交互就上 ECharts。
点数上万，或者要投影到地理坐标上（第 15 款那个例子是四万条） → 第四档。到这里已经不是「做个图表」，是做一个可视化项目了，工期按项目算。
还有一条不在表里但更常犯的：别用图表画三个数字。「服务客户 1200 家」这种，一个大号字加一行说明，比任何图都清楚。
本文 15 款都在童哲网前端特效板块。图表画完总要落到一个页面里去，那一步在14 款后台管理系统模板里；第 09 款那条 GSAP 时间线的完整用法，在14 款 GSAP 动画网站模板里写透了。另外两篇是邻居：CSS 加载动画与进度条效果、Three.js 与 WebGL 网页 3D 特效。
