图表
Chart
UI 组件也叫：数据可视化、统计图、折线图、柱状图、饼图
一句话：把数字画成折线、柱子、扇形等图形，用来展示趋势、对比和占比，让数据一眼就能看懂。
详细解释
图表是一个大类，最常用的几种各有分工：折线图 看随时间的变化趋势；柱状图 比较几个类别的大小；饼图或环形图 看各部分占总体的比例，类别最好不超过五六个；散点图 看两个数值之间的关系。一个完整的图表通常包含标题、坐标轴和刻度、图例，以及悬停时弹出的数据提示框。
前端一般不手画图表，而是用图表库：ECharts、Recharts、Chart.js、AntV G2 都很常见，shadcn/ui 的 Chart 组件底层就是 Recharts。和 统计数值 的分工：统计数值给出「现在是多少」，图表讲「怎么变化、怎么分布」。和 表格 的分工：要看精确数字、逐行核对时用表格，要看整体规律时用图表。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
用 ECharts 画一个近 30 天访问量折线图，宽度自适应容器、高 300px，横轴是日期、纵轴是访问量，鼠标悬停显示当天数值的提示框；右上角可切换「按天 / 按周」；数据加载中显示骨架屏，没有数据时显示空状态文字。
结构与适用场景
结构描述
由绘图区（折线、柱子或扇形）、坐标轴与刻度、图例、标题和悬停数据提示框组成。
适用场景
- 需要展示一段时间内数据的变化趋势
- 需要比较几个类别之间的数量大小或占比
- 仪表盘里需要把大量数字浓缩成一眼能看懂的结论
不适用场景
- 用户需要逐条核对精确数值，用表格更合适
- 只有一两个数字需要强调，用统计数值卡片就够
- 类别有十几个以上，画成饼图后扇形细到无法分辨
常见坏用法
- 为了好看选错图形，比如用饼图展示时间趋势
- 没有坐标轴标签、单位和图例，看不出每条线代表什么
- 容器没设高度或不随窗口缩放，图表显示为空白或被截断
识别特征
- 一块带横纵坐标轴的区域，里面有折线或柱子
- 或者是一个分成几块扇形的圆或圆环
- 旁边有颜色图例，悬停时出现小数据框
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
[_echarts_instance_].recharts-wrapper[data-slot="chart"].highcharts-container.apexcharts-canvascanvas[role="img"]