企业官网建设流程全解析

很多做出海 SaaS 或中后台业务系统的独立开发者，在做数据大屏或财务汇总功能时，第一反应往往是直接安装echarts或者庞大的图表库。但当项目打包构建时，看到echarts动辄打包出三四百 KB 甚至近 1MB 的 Vendor 代码体积，对首屏加载性能极度敏感的我实在不能忍受。

尤其是用户通过我们之前的发票 OCR 与表单抽取模块上传了大量 PDF 发票与结构化 JSON 之后，他们最急迫的需求就是：一秒内直观看到当月支出趋势、增值税分类占比以及供应商开销前五名。如果为了画几个简单的柱状图和环形图而拖慢整个控制台的冷启动加载速度，完全是得不偿失。

今天这篇，我带大家在不引入任何第三方笨重图表库的前提下，手写一个轻量高效的 Canvas 财务多维可视化报表引擎。从数据聚合、高分屏抗锯齿适配，到环形图与渐变柱状图的绘制，全程不到 200 行原生 TypeScript 代码，打包体积压缩后不足 4KB。

一、发票结构化数据的多维聚合逻辑

在把数据画到画布上之前，前端拿到的是上一讲通过 OCR 提取出来的原始发票元数据数组。每张发票包含开票日期、价税合计金额、税额、销售方名称、商品分类等字段。

可视化引擎的第一步，是对这些离散的原始记录进行单次遍历多维聚合（Single-pass Multi-dimensional Aggregation），避免在前端进行多次深层filter或map造成长列表卡顿：

export interface InvoiceItem { id: string; date: string; // 格式: "2026-10-07" vendor: string; category: string; // 如 "服务器与云服务", "办公软件", "广告投放", "差旅" amount: number; // 价税合计 tax: number; // 税额 } export interface AggregatedFinanceData { monthlyTrend: { month: string; totalAmount: number; totalTax: number }[]; categoryShare: { category: string; amount: number; percentage: number }[]; topVendors: { vendor: string; amount: number }[]; } export function aggregateInvoiceData(invoices: InvoiceItem[]): AggregatedFinanceData { const monthMap = new Map<string, { totalAmount: number; totalTax: number }>(); const categoryMap = new Map<string, number>(); const vendorMap = new Map<string, number>(); let overallTotal = 0; for (const inv of invoices) { // 1. 月度趋势统计 (按 YYYY-MM 截取) const monthKey = inv.date.slice(0, 7); const mData = monthMap.get(monthKey) || { totalAmount: 0, totalTax: 0 }; mData.totalAmount += inv.amount; mData.totalTax += inv.tax; monthMap.set(monthKey, mData); // 2. 分类占比统计 const cAmount = categoryMap.get(inv.category) || 0; categoryMap.set(inv.category, cAmount + inv.amount); // 3. 供应商统计 const vAmount = vendorMap.get(inv.vendor) || 0; vendorMap.set(inv.vendor, vAmount + inv.amount); overallTotal += inv.amount; } // 排序与结构整理 const monthlyTrend = Array.from(monthMap.entries()) .sort(([a], [b]) => a.localeCompare(b)) .map(([month, data]) => ({ month, ...data })); const categoryShare = Array.from(categoryMap.entries()) .map(([category, amount]) => ({ category, amount, percentage: overallTotal > 0 ? Number(((amount / overallTotal) * 100).toFixed(1)) : 0, })) .sort((a, b) => b.amount - a.amount); const topVendors = Array.from(vendorMap.entries()) .map(([vendor, amount]) => ({ vendor, amount })) .sort((a, b) => b.amount - a.amount) .slice(0, 5); return { monthlyTrend, categoryShare, topVendors }; }

二、轻量 Canvas 绘图引擎与高分屏适配

在 Retina 视网膜屏幕或高刷新率移动设备上，直接给<canvas>设置宽高会导致文字和线条发虚模糊。核心原理是浏览器的逻辑像素（CSS 像素）与设备物理像素（window.devicePixelRatio）存在倍率差异。

我们必须在初始化 Canvas 时，将其物理像素放大为CSS 尺寸 * DPR，同时通过 CSS 约束它的展示大小，最后调用上下文的ctx.scale(dpr, dpr)：

export class FinanceCanvasRenderer { private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private dpr: number; constructor(canvas: HTMLCanvasElement) { this.canvas = canvas; const context = canvas.getContext('2d'); if (!context) { throw new Error('无法获取 Canvas 2D 渲染上下文'); } this.ctx = context; this.dpr = window.devicePixelRatio || 1; this.initDPI(); } private initDPI() { const rect = this.canvas.getBoundingClientRect(); this.canvas.width = rect.width * this.dpr; this.canvas.height = rect.height * this.dpr; this.ctx.scale(this.dpr, this.dpr); } // 清理画布准备重绘 public clear(width: number, height: number) { this.ctx.clearRect(0, 0, width, height); } public getContext(): CanvasRenderingContext2D { return this.ctx; } }

三、实战：渐变柱状图（带税额双层堆叠与圆角）

财务报表中最常见的需求就是看支出总额与其中的税额。我们用原生 Canvas API 绘制柱状图，支持平滑的竖向渐变色和顶部圆角（Border Radius）：

export function renderBarChart( ctx: CanvasRenderingContext2D, data: { label: string; amount: number; tax: number }[], width: number, height: number ) { const padding = { top: 40, right: 30, bottom: 40, left: 60 }; const chartWidth = width - padding.left - padding.right; const chartHeight = height - padding.top - padding.bottom; // 计算金额最大值用于归一化纵坐标 const maxVal = Math.max(...data.map(d => d.amount), 100); const barWidth = Math.min(chartWidth / (data.length * 2), 48); // 1. 绘制水平虚线参考网格 ctx.strokeStyle = '#1f2937'; ctx.lineWidth = 1; ctx.setLineDash([4, 4]); const steps = 4; for (let i = 0; i <= steps; i++) { const y = padding.top + (chartHeight / steps) * i; const val = Math.round(maxVal * (1 - i / steps)); ctx.beginPath(); ctx.moveTo(padding.left, y); ctx.lineTo(width - padding.right, y); ctx.stroke(); // 绘制纵坐标数值 ctx.fillStyle = '#6b7280'; ctx.font = '11px sans-serif'; ctx.textAlign = 'right'; ctx.fillText(`¥${val.toLocaleString()}`, padding.left - 8, y + 4); } ctx.setLineDash([]); // 恢复实线 // 2. 绘制柱子 const stepX = chartWidth / data.length; data.forEach((item, index) => { const x = padding.left + stepX * index + (stepX - barWidth) / 2; const barH = (item.amount / maxVal) * chartHeight; const taxH = (item.tax / maxVal) * chartHeight; const y = padding.top + chartHeight - barH; // 总支出渐变背景 const gradient = ctx.createLinearGradient(0, y, 0, y + barH); gradient.addColorStop(0, '#3b82f6'); gradient.addColorStop(1, '#1d4ed8'); ctx.fillStyle = gradient; // 绘制圆角矩形柱 drawRoundedRect(ctx, x, y, barWidth, barH, 6); ctx.fill(); // 内部堆叠税额部分（半透明浅色叠加） if (taxH > 0) { const taxY = padding.top + chartHeight - taxH; ctx.fillStyle = 'rgba(239, 68, 68, 0.65)'; // 红色标识税额 drawRoundedRect(ctx, x, taxY, barWidth, taxH, 4); ctx.fill(); } // X 轴文字标注 ctx.fillStyle = '#9ca3af'; ctx.font = '12px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(item.label, x + barWidth / 2, height - padding.bottom + 20); }); } function drawRoundedRect( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number ) { const radius = Math.min(r, w / 2, h / 2); ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + w - radius, y); ctx.quadraticCurveTo(x + w, y, x + w, y + radius); ctx.lineTo(x + w, y + h); ctx.lineTo(x, y + h); ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.closePath(); }

四、支出品类环形图（Donut Chart）极简绘制

环形图是展现分类构成的利器。利用 Canvas 的arc()方法，只需简单计算起止弧度，就能优雅完成扇形切分：

const CATEGORY_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899', '#6b7280']; export function renderDonutChart( ctx: CanvasRenderingContext2D, data: { category: string; percentage: number }[], centerX: number, centerY: number, radius: number, innerRadius: number ) { let startAngle = -Math.PI / 2; // 从 12 点钟方向开始 data.forEach((item, index) => { const sliceAngle = (item.percentage / 100) * 2 * Math.PI; const endAngle = startAngle + sliceAngle; ctx.beginPath(); ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true); ctx.closePath(); ctx.fillStyle = CATEGORY_COLORS[index % CATEGORY_COLORS.length]; ctx.fill(); startAngle = endAngle; }); // 中心总览文案 ctx.fillStyle = '#ffffff'; ctx.font = 'bold 16px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('发票分类', centerX, centerY - 4); ctx.font = '12px sans-serif'; ctx.fillStyle = '#9ca3af'; ctx.fillText('支出分布', centerX, centerY + 16); }

五、打包体积与性能实测对比

我们将这套纯 Canvas 实现与传统图表方案在同一个 Vite 生产构建流程中进行了对比：

通过剥离不必要的过度设计，我们不仅将前端打包产物体积削减了近 99%，而且首屏渲染几乎做到瞬时呈现。做 SaaS 架构优化，有时候最克制、最接地气的原生方案，才是解决业务痛点的一剂良药。