SketchyChart 手绘图表

新粗野主义风格的手绘感图表组件，纯 Vue 使用 <svg> 绘制。利用 SVG 分形噪声滤镜让坐标轴、折线和柱体边缘产生波动，完美拟合手写草稿质感。零外部依赖。

预览

Preview

折线图

柱状图

饼图

高抖动幅度 (sketchiness=8)

关闭网格线 (grid=false)

自定义尺寸 (width=400, height=250)

安装

pnpm dlx brutx-vue@latest add sketchy-chart

用法

<script setup>
import { SketchyChart } from 'brutx-ui-vue'

const data = [
    { label: 'Jan', value: 30 },
    { label: 'Feb', value: 65 },
    { label: 'Mar', value: 45 },
]
</script>

<template>
    <SketchyChart type="line" :data="data" />
</template>

变体

变体	说明
line	折线图，带阴影填充区和拐点圆圈
bar	柱状图，带 Hatch 斜线填充和硬投影
pie	饼图，使用设计令牌色板和粗黑边框

<template>
    <SketchyChart type="bar" :data="data" />
</template>

手绘抖动

sketchiness prop 控制手绘抖动幅度 (0-10)，值越大抖动越明显：

<SketchyChart type="line" :data="data" :sketchiness="8" />

数据处理

• 空数组：折线/柱状图渲染空图表框架（仅坐标轴），饼图渲染空白
• 负值：取绝对值
• 大数据集（>30 项）：自动降采样

Props

属性	类型	默认值	说明
type	'line' | 'bar' | 'pie'	'line'	图表类型
data	Array<{ label: string, value: number }>	[]	图表数据源
sketchiness	number	2	手绘抖动幅度 (0-10)
grid	boolean	true	是否绘制背景网格（饼图下无效）
width	number	600	图表宽度 (px)
height	number	400	图表高度 (px)
class	string	—	外部类覆盖

可访问性

• ARIA 属性：SVG 设置了 role="img" 和 aria-label
• 屏幕阅读器：包含 <title> 元素供屏幕阅读器读取