工程化与框架系列（26）--前端可视化开发

前端可视化开发 📊

引言

前端可视化是现代Web应用中不可或缺的一部分，它能够以直观的方式展示复杂的数据和信息。本文将深入探讨前端可视化开发的关键技术和最佳实践，包括图表绘制、数据处理、动画效果等方面。

可视化技术概述

前端可视化主要包括以下技术方向：

Canvas绘图：像素级别的图形绘制
SVG矢量图：可缩放的矢量图形
WebGL 3D：三维图形渲染
可视化库：ECharts、D3.js等
地理信息：地图可视化

Canvas图形绘制

基础绘图API

// Canvas绘图管理器
class CanvasRenderer {
    private canvas: HTMLCanvasElement;
    private ctx: CanvasRenderingContext2D;
    
    constructor(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d')!;
        
        this.initializeCanvas();
    }
    
    // 初始化画布
    private initializeCanvas(): void {
        // 设置画布尺寸为显示尺寸的2倍，提高清晰度
        const displayWidth = this.canvas.clientWidth;
        const displayHeight = this.canvas.clientHeight;
        
        this.canvas.width = displayWidth * 2;
        this.canvas.height = displayHeight * 2;
        
        // 缩放上下文以匹配显示尺寸
        this.ctx.scale(2, 2);
        
        // 设置默认样式
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#333';
        this.ctx.fillStyle = '#666';
    }
    
    // 清空画布
    clear(): void {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
    
    // 绘制直线
    drawLine(
        startX: number,
        startY: number,
        endX: number,
        endY: number,
        options: LineOptions = {}
    ): void {
        this.ctx.save();
        
        // 应用样式选项
        if (options.color) this.ctx.strokeStyle = options.color;
        if (options.width) this.ctx.lineWidth = options.width;
        if (options.dash) this.ctx.setLineDash(options.dash);
        
        // 绘制路径
        this.ctx.beginPath();
        this.ctx.moveTo(startX, startY);
        this.ctx.lineTo(endX, endY);
        this.ctx.stroke();
        
        this.ctx.restore();
    }
    
    // 绘制矩形
    drawRect(
        x: number,
        y: number,
        width: number,
        height: number,
        options: ShapeOptions = {}
    ): void {
        this.ctx.save();
        
        // 应用样式选项
        if (options.fillColor) this.ctx.fillStyle = options.fillColor;
        if (options.strokeColor) this.ctx.strokeStyle = options.strokeColor;
        if (options.lineWidth) this.ctx.lineWidth = options.lineWidth;
        
        // 绘制矩形
        if (options.fillColor) {
            this.ctx.fillRect(x, y, width, height);
        }
        if (options.strokeColor) {
            this.ctx.strokeRect(x, y, width, height);
        }
        
        this.ctx.restore();
    }
    
    // 绘制圆形
    drawCircle(
        x: number,
        y: number,
        radius: number,
        options: ShapeOptions = {}
    ): void {
        this.ctx.save();
        
        // 应用样式选项
        if (options.fillColor) this.ctx.fillStyle = options.fillColor;
        if (options.strokeColor) this.ctx.strokeStyle = options.strokeColor;
        if (options.lineWidth) this.ctx.lineWidth = options.lineWidth;
        
        // 绘制圆形
        this.ctx.beginPath();
        this.ctx.arc(x, y, radius, 0, Math.PI * 2);
        
        if (options.fillColor) {
            this.ctx.fill();
        }
        if (options.strokeColor) {
            this.ctx.stroke();
        }
        
        this.ctx.restore();
    }
    
    // 绘制文本
    drawText(
        text: string,
        x: number,
        y: number,
        options: TextOptions = {}
    ): void {
        this.ctx.save();
        
        // 应用样式选项
        if (options.font) this.ctx.font = options.font;
        if (options.color) this.ctx.fillStyle = options.color;
        if (options.align) this.ctx.textAlign = options.align;
        if (options.baseline) this.ctx.textBaseline = options.baseline;
        
        // 绘制文本
        this.ctx.fillText(text, x, y);
        
        this.ctx.restore();
    }
}

// 绘图选项接口
interface LineOptions {
    color?: string;
    width?: number;
    dash?: number[];
}

interface ShapeOptions {
    fillColor?: string;
    strokeColor?: string;
    lineWidth?: number;
}

interface TextOptions {
    font?: string;
    color?: string;
    align?: CanvasTextAlign;
    baseline?: CanvasTextBaseline;
}

// 使用示例
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const renderer = new CanvasRenderer(canvas);

// 绘制图形
renderer.drawRect(50, 50, 100, 80, {
    fillColor: '#f0f0f0',
    strokeColor: '#333'
});

renderer.drawCircle(200, 100, 40, {
    fillColor: '#1890ff'
});

renderer.drawLine(50, 200, 250, 200, {
    color: '#666',
    width: 2,
    dash: [5, 5]
});

renderer.drawText('Hello Canvas', 100, 250, {
    font: '20px Arial',
    color: '#333',
    align: 'center'
});

动画实现

// 动画管理器
class AnimationManager {
    private animations: Animation[];
    private isRunning: boolean;
    private lastTime: number;
    
    constructor() {
        this.animations = [];
        this.isRunning = false;
        this.lastTime = 0;
        
        this.animate = this.animate.bind(this);
    }
    
    // 添加动画
    addAnimation(animation: Animation): void {
        this.animations.push(animation);
        
        if (!this.isRunning) {
            this.start();
        }
    }
    
    // 移除动画
    removeAnimation(animation: Animation): void {
        const index = this.animations.indexOf(animation);
        if (index !== -1) {
            this.animations.splice(index, 1);
        }
        
        if (this.animations.length === 0) {
            this.stop();
        }
    }
    
    // 启动动画循环
    private start(): void {
        this.isRunning = true;
        this.lastTime = performance.now();
        requestAnimationFrame(this.animate);
    }
    
    // 停止动画循环
    private stop(): void {
        this.isRunning = false;
    }
    
    // 动画循环
    private animate(currentTime: number): void {
        if (!this.isRunning) return;
        
        // 计算时间增量
        const deltaTime = currentTime - this.lastTime;
        this.lastTime = currentTime;
        
        // 更新所有动画
        this.animations.forEach(animation => {
            animation.update(deltaTime);
        });
        
        // 继续动画循环
        requestAnimationFrame(this.animate);
    }
}

// 动画基类
abstract class Animation {
    protected duration: number;
    protected elapsed: number;
    protected isComplete: boolean;
    
    constructor(duration: number) {
        this.duration = duration;
        this.elapsed = 0;
        this.isComplete = false;
    }
    
    // 更新动画状态
    update(deltaTime: number): void {
        if (this.isComplete) return;
        
        this.elapsed += deltaTime;
        
        if (this.elapsed >= this.duration) {
            this.elapsed = this.duration;
            this.isComplete = true;
        }
        
        const progress = this.elapsed / this.duration;
        this.onUpdate(this.easeInOut(progress));
    }
    
    // 缓动函数
    protected easeInOut(t: number): number {
        return t < 0.5
            ? 2 * t * t
            : -1 + (4 - 2 * t) * t;
    }
    
    // 动画更新回调
    protected abstract onUpdate(progress: number): void;
}

// 圆形动画示例
class CircleAnimation extends Animation {
    private renderer: CanvasRenderer;
    private startRadius: number;
    private endRadius: number;
    private x: number;
    private y: number;
    
    constructor(
        renderer: CanvasRenderer,
        x: number,
        y: number,
        startRadius: number,
        endRadius: number,
        duration: number
    ) {
        super(duration);
        
        this.renderer = renderer;
        this.x = x;
        this.y = y;
        this.startRadius = startRadius;
        this.endRadius = endRadius;
    }
    
    protected onUpdate(progress: number): void {
        const currentRadius = this.startRadius + (this.endRadius - this.startRadius) * progress;
        
        this.renderer.clear();
        this.renderer.drawCircle(this.x, this.y, currentRadius, {
            fillColor: '#1890ff'
        });
    }
}

// 使用示例
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const renderer = new CanvasRenderer(canvas);
const animationManager = new AnimationManager();

// 创建并添加动画
const circleAnimation = new CircleAnimation(
    renderer,
    200,
    200,
    0,
    100,
    1000 // 1秒
);

animationManager.addAnimation(circleAnimation);

SVG图形绘制

SVG基础组件

// SVG渲染器
class SVGRenderer {
    private svg: SVGSVGElement;
    
    constructor(container: HTMLElement, width: number, height: number) {
        this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        this.svg.setAttribute('width', width.toString());
        this.svg.setAttribute('height', height.toString());
        this.svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
        
        container.appendChild(this.svg);
    }
    
    // 创建矩形
    createRect(
        x: number,
        y: number,
        width: number,
        height: number,
        options: SVGShapeOptions = {}
    ): SVGRectElement {
        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        
        rect.setAttribute('x', x.toString());
        rect.setAttribute('y', y.toString());
        rect.setAttribute('width', width.toString());
        rect.setAttribute('height', height.toString());
        
        this.applyShapeOptions(rect, options);
        
        this.svg.appendChild(rect);
        return rect;
    }
    
    // 创建圆形
    createCircle(
        cx: number,
        cy: number,
        r: number,
        options: SVGShapeOptions = {}
    ): SVGCircleElement {
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        
        circle.setAttribute('cx', cx.toString());
        circle.setAttribute('cy', cy.toString());
        circle.setAttribute('r', r.toString());
        
        this.applyShapeOptions(circle, options);
        
        this.svg.appendChild(circle);
        return circle;
    }
    
    // 创建路径
    createPath(
        d: string,
        options: SVGShapeOptions = {}
    ): SVGPathElement {
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        
        path.setAttribute('d', d);
        
        this.applyShapeOptions(path, options);
        
        this.svg.appendChild(path);
        return path;
    }
    
    // 创建文本
    createText(
        x: number,
        y: number,
        text: string,
        options: SVGTextOptions = {}
    ): SVGTextElement {
        const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        
        textElement.setAttribute('x', x.toString());
        textElement.setAttribute('y', y.toString());
        textElement.textContent = text;
        
        if (options.fontSize) {
            textElement.style.fontSize = options.fontSize;
        }
        if (options.fontFamily) {
            textElement.style.fontFamily = options.fontFamily;
        }
        if (options.fill) {
            textElement.setAttribute('fill', options.fill);
        }
        if (options.textAnchor) {
            textElement.setAttribute('text-anchor', options.textAnchor);
        }
        
        this.svg.appendChild(textElement);
        return textElement;
    }
    
    // 应用形状样式选项
    private applyShapeOptions(
        element: SVGElement,
        options: SVGShapeOptions
    ): void {
        if (options.fill) {
            element.setAttribute('fill', options.fill);
        }
        if (options.stroke) {
            element.setAttribute('stroke', options.stroke);
        }
        if (options.strokeWidth) {
            element.setAttribute('stroke-width', options.strokeWidth.toString());
        }
        if (options.opacity) {
            element.setAttribute('opacity', options.opacity.toString());
        }
    }
}

// SVG样式选项接口
interface SVGShapeOptions {
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    opacity?: number;
}

interface SVGTextOptions {
    fontSize?: string;
    fontFamily?: string;
    fill?: string;
    textAnchor?: 'start' | 'middle' | 'end';
}

// 使用示例
const container = document.getElementById('container')!;
const renderer = new SVGRenderer(container, 400, 300);

// 创建各种SVG图形
renderer.createRect(50, 50, 100, 80, {
    fill: '#f0f0f0',
    stroke: '#333',
    strokeWidth: 2
});

renderer.createCircle(200, 100, 40, {
    fill: '#1890ff',
    opacity: 0.8
});

renderer.createPath('M100,100 L200,100 L150,50 Z', {
    fill: '#666',
    stroke: '#333',
    strokeWidth: 1
});

renderer.createText(150, 200, 'Hello SVG', {
    fontSize: '20px',
    fontFamily: 'Arial',
    fill: '#333',
    textAnchor: 'middle'
});

数据可视化实现

柱状图实现

// 柱状图渲染器
class BarChart {
    private svg: SVGRenderer;
    private width: number;
    private height: number;
    private padding: number;
    
    constructor(
        container: HTMLElement,
        width: number,
        height: number,
        padding: number = 40
    ) {
        this.width = width;
        this.height = height;
        this.padding = padding;
        
        this.svg = new SVGRenderer(container, width, height);
    }
    
    // 渲染柱状图
    render(data: BarData[]): void {
        // 计算坐标轴范围
        const maxValue = Math.max(...data.map(d => d.value));
        const chartWidth = this.width - 2 * this.padding;
        const chartHeight = this.height - 2 * this.padding;
        const barWidth = chartWidth / data.length * 0.8;
        const barGap = chartWidth / data.length * 0.2;
        
        // 绘制坐标轴
        this.drawAxis(chartWidth, chartHeight, maxValue);
        
        // 绘制柱子
        data.forEach((item, index) => {
            const x = this.padding + index * (barWidth + barGap);
            const barHeight = (item.value / maxValue) * chartHeight;
            const y = this.height - this.padding - barHeight;
            
            // 绘制柱子
            this.svg.createRect(x, y, barWidth, barHeight, {
                fill: item.color || '#1890ff',
                opacity: 0.8
            });
            
            // 绘制标签
            this.svg.createText(
                x + barWidth / 2,
                this.height - this.padding + 20,
                item.label,
                {
                    fontSize: '12px',
                    textAnchor: 'middle'
                }
            );
            
            // 绘制数值
            this.svg.createText(
                x + barWidth / 2,
                y - 5,
                item.value.toString(),
                {
                    fontSize: '12px',
                    textAnchor: 'middle'
                }
            );
        });
    }
    
    // 绘制坐标轴
    private drawAxis(
        chartWidth: number,
        chartHeight: number,
        maxValue: number
    ): void {
        // X轴
        this.svg.createPath(
            `M${this.padding},${this.height - this.padding} ` +
            `L${this.width - this.padding},${this.height - this.padding}`,
            {
                stroke: '#666',
                strokeWidth: 1
            }
        );
        
        // Y轴
        this.svg.createPath(
            `M${this.padding},${this.padding} ` +
            `L${this.padding},${this.height - this.padding}`,
            {
                stroke: '#666',
                strokeWidth: 1
            }
        );
        
        // Y轴刻度
        const tickCount = 5;
        for (let i = 0; i <= tickCount; i++) {
            const y = this.height - this.padding - (i / tickCount) * chartHeight;
            const value = Math.round(maxValue * (i / tickCount));
            
            // 刻度线
            this.svg.createPath(
                `M${this.padding - 5},${y} L${this.padding},${y}`,
                {
                    stroke: '#666',
                    strokeWidth: 1
                }
            );
            
            // 刻度值
            this.svg.createText(
                this.padding - 10,
                y,
                value.toString(),
                {
                    fontSize: '12px',
                    textAnchor: 'end'
                }
            );
        }
    }
}

// 数据接口
interface BarData {
    label: string;
    value: number;
    color?: string;
}

// 使用示例
const container = document.getElementById('chart-container')!;
const chart = new BarChart(container, 600, 400);

const data: BarData[] = [
    { label: '一月', value: 120, color: '#1890ff' },
    { label: '二月', value: 200, color: '#2fc25b' },
    { label: '三月', value: 150, color: '#facc14' },
    { label: '四月', value: 180, color: '#223273' },
    { label: '五月', value: 240, color: '#8543e0' }
];

chart.render(data);

饼图实现

// 饼图渲染器
class PieChart {
    private svg: SVGRenderer;
    private width: number;
    private height: number;
    private radius: number;
    
    constructor(
        container: HTMLElement,
        width: number,
        height: number
    ) {
        this.width = width;
        this.height = height;
        this.radius = Math.min(width, height) / 3;
        
        this.svg = new SVGRenderer(container, width, height);
    }
    
    // 渲染饼图
    render(data: PieData[]): void {
        const total = data.reduce((sum, item) => sum + item.value, 0);
        let startAngle = 0;
        
        // 绘制扇形
        data.forEach(item => {
            const percentage = item.value / total;
            const endAngle = startAngle + percentage * Math.PI * 2;
            
            // 计算扇形路径
            const path = this.createArcPath(
                this.width / 2,
                this.height / 2,
                this.radius,
                startAngle,
                endAngle
            );
            
            // 绘制扇形
            this.svg.createPath(path, {
                fill: item.color || '#1890ff',
                stroke: '#fff',
                strokeWidth: 1
            });
            
            // 计算标签位置
            const labelAngle = startAngle + (endAngle - startAngle) / 2;
            const labelRadius = this.radius * 1.2;
            const labelX = this.width / 2 + Math.cos(labelAngle) * labelRadius;
            const labelY = this.height / 2 + Math.sin(labelAngle) * labelRadius;
            
            // 绘制标签
            this.svg.createText(
                labelX,
                labelY,
                `${item.label} (${Math.round(percentage * 100)}%)`,
                {
                    fontSize: '12px',
                    textAnchor: 'middle'
                }
            );
            
            startAngle = endAngle;
        });
    }
    
    // 创建扇形路径
    private createArcPath(
        cx: number,
        cy: number,
        radius: number,
        startAngle: number,
        endAngle: number
    ): string {
        const start = {
            x: cx + Math.cos(startAngle) * radius,
            y: cy + Math.sin(startAngle) * radius
        };
        
        const end = {
            x: cx + Math.cos(endAngle) * radius,
            y: cy + Math.sin(endAngle) * radius
        };
        
        const largeArcFlag = endAngle - startAngle <= Math.PI ? '0' : '1';
        
        return [
            'M', cx, cy,
            'L', start.x, start.y,
            'A', radius, radius, 0, largeArcFlag, 1, end.x, end.y,
            'Z'
        ].join(' ');
    }
}

// 数据接口
interface PieData {
    label: string;
    value: number;
    color?: string;
}

// 使用示例
const container = document.getElementById('pie-container')!;
const chart = new PieChart(container, 400, 400);

const data: PieData[] = [
    { label: '产品A', value: 30, color: '#1890ff' },
    { label: '产品B', value: 20, color: '#2fc25b' },
    { label: '产品C', value: 25, color: '#facc14' },
    { label: '产品D', value: 15, color: '#223273' },
    { label: '产品E', value: 10, color: '#8543e0' }
];

chart.render(data);