跳到主要内容
Termlib

UI 组件 · 数据展示

图表

Chart

也叫：数据可视化、统计图、折线图、柱状图、饼图

把数字画成折线、柱子、扇形等图形，用来展示趋势、对比和占比，让数据一眼就能看懂。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

用 ECharts 画一个近 30 天访问量折线图，宽度自适应容器、高 300px，横轴是日期、纵轴是访问量，鼠标悬停显示当天数值的提示框；右上角可切换「按天 / 按周」；数据加载中显示骨架屏，没有数据时显示空状态文字。

发给

01判断

你的内容是这样吗？

对照两列，确认图表是不是你要找的。

符合这些情况，用图表

  • 需要展示一段时间内数据的变化趋势
  • 需要比较几个类别之间的数量大小或占比
  • 仪表盘里需要把大量数字浓缩成一眼能看懂的结论

是这些情况，换成别的

  • 用户需要逐条核对精确数值

    改用表格

  • 只有一两个数字需要强调，用统计数值卡片就够

    改用统计数值卡片

  • 类别有十几个以上，画成饼图后扇形细到无法分辨

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    为了好看选错图形，比如用饼图展示时间趋势

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    没有坐标轴标签、单位和图例，看不出每条线代表什么

  3. 03

    容器没设高度或不随窗口缩放，图表显示为空白或被截断

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由绘图区（折线、柱子或扇形）、坐标轴与刻度、图例、标题和悬停数据提示框组成。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一块带横纵坐标轴的区域，里面有折线或柱子
  2. 2或者是一个分成几块扇形的圆或圆环
  3. 3旁边有颜色图例，悬停时出现小数据框

04解释

详细解释

图表是一个大类，最常用的几种各有分工：折线图 看随时间的变化趋势；柱状图 比较几个类别的大小；饼图或环形图 看各部分占总体的比例，类别最好不超过五六个；散点图 看两个数值之间的关系。一个完整的图表通常包含标题、坐标轴和刻度、图例，以及悬停时弹出的数据提示框。

前端一般不手画图表，而是用图表库：ECharts、Recharts、Chart.js、AntV G2 都很常见，shadcn/ui 的 Chart 组件底层就是 Recharts。和 统计数值 的分工：统计数值给出「现在是多少」，图表讲「怎么变化、怎么分布」。和 表格 的分工：要看精确数字、逐行核对时用表格，要看整体规律时用图表。

开发者信息
术语 ID
component-chart
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [_echarts_instance_]
  • .recharts-wrapper
  • [data-slot="chart"]
  • .highcharts-container
  • .apexcharts-canvas
  • canvas[role="img"]
  • svg.recharts-surface
  • .recharts-responsive-container
  • .echarts
  • canvas[class*="chart" i]
  • svg:has(> text, > g > text):has(polyline, path[d*="C"], rect + rect + rect)
  • [data-chart]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • chart
  • graph
  • sparkline
  • plot
  • chart-container
  • echarts
  • recharts
  • line-chart
  • bar-chart
  • pie-chart
  • area-chart
  • donut-chart
  • trend-chart
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Chart
  • LineChart
  • BarChart
  • PieChart
  • AreaChart
  • ResponsiveContainer
  • ReactECharts
  • ECharts
  • Sparkline
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30