Prompt → Component

AI 图表控件 10 式

十条提示词,十个可交互图表控件。每式下方附原始提示词,点击复制后可直接投喂给你的 AI 前端助手。

01活动圆环

同心多环 · 进入时从零画到当前值 · 中心数字同步增长 · 超出部分叠加深色

0
综合完成度
PROMPT 01
做一组同心活动圆环,进入时从零画到当前值,中心数字同步增长,超出部分叠加深色。
02打卡热力格

按次数分五档深浅 · 点击某一天弹出当天详情

少 多
PROMPT 02
做一个打卡热力格,按次数分五档深浅,点击某一天弹出当天详情。
03仪表盘

半圆仪表盘 · 刻度三段色 · 指针扫到当前值 · 带轻微回弹

PROMPT 03
做一个半圆仪表盘,刻度分三段颜色,指针进入时扫到当前值,带轻微回弹。
04柱状图

周 / 月切换柱高平滑过渡 · 长按某根柱其余变暗并显示数值

PROMPT 04
做一个柱状图,切换周和月时柱高平滑过渡,按住某根时其余变暗并显示数值。
05专注分段图

按阶段区分高度与颜色 · 横向滑动时顶部显示当前时刻与阶段

PROMPT 05
做一个专注分段图,按阶段区分高度和颜色,横向滑动时顶部显示当前时刻和阶段。
06范围折线图

一周 / 一月 / 一年切换 · 线条平滑变形到新数据 · 面积渐变同步过渡

PROMPT 06
做一个折线图,顶部切换一周、一月、一年,线条平滑变形到新数据,面积渐变同步过渡。
07目标线

可拖动目标线 · 过线柱子高亮 · 顶部实时显示达标天数

PROMPT 07
做一个带可拖动目标线的柱状图,拖动时过线的柱子高亮,顶部实时显示达标天数。
08分段占比条

段间留细缝 · 点击某段抽出并显示名称和百分比

PROMPT 08
做一条分段占比条,段间留细缝,点击某段时抽出并显示名称和百分比。
09环形占比图

各段依次顺时针画出 · 点击某段外移高亮 · 中心显示该段名称和百分比

PROMPT 09
做一个环形占比图,各段依次顺时针画出,点击某段外移高亮,中心显示该段名称和百分比。
10气泡图

圆的大小表示数量 · 点击气泡放大居中 · 其余气泡被推开

PROMPT 10
做一个气泡图,圆的大小表示数量,点击某个气泡放大居中,其余气泡被推开。