mastergo ai 不生成动态图表数据，而是生成可视化布局和图表容器。它通过自然语言精准描述图表类型、维度与业务语义来搭建“架子”，支持截图辅助识别样式，可用“块状精修法”逐模块优化细节，并导出带数据接口的 vue/react 组件代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接生成动态图表数据，但它能快速生成 Dashboard 的可视化布局和图表容器——也就是把折线图、饼图、卡片、表格这些“占位结构”精准落地，再配合外部数据源或轻量代码完成最终渲染。关键不是让它画图，而是让它搭好图的“架子”并预留可接入位置。
用自然语言描述图表区域
在 MasterGo AI 的「AI 生成界面」中，别只写“加一个图表”，要明确类型、维度和业务语义：
- 写“顶部放销售趋势图：横轴为月份（1–6月），纵轴为销售额（万元），带同比箭头和今日达成率标签”
- 写“右侧三列统计卡：订单数（+12%）、用户增长（+8.3%）、客单价（¥298）”
- 写“中间主图表区：左侧柱状图（各渠道转化率），右侧环形图（新老用户占比），下方带筛选器（按周/月切换）”
越贴近真实业务表达，AI 越容易匹配组件逻辑和间距层级。
上传原型图或截图辅助识别图表样式
如果已有 Excel 图表截图、Figma 线框图或手绘草图，直接上传到 MasterGo AI 输入页：
- 截图里包含图例、坐标轴、颜色块？AI 会模仿配色与图例位置
- 有筛选控件或下拉菜单？它会自动补全交互区域和对齐方式
- 注意：不要传模糊图或含敏感数据的截图，优先裁切干净的图表局部
比纯文字更稳，尤其适合还原已有系统中的定制化图表样式。
生成后用「块状精修法」调细节
第一版出来后，图表往往只是灰色占位框。这时别全局重写，按模块分块优化：
- 先点中“销售额趋势图”区块 → 输入指令：“把X轴标签左对齐，Y轴数值加‘万元’单位，折线粗2px，高亮本月柱子”
- 再选中统计卡片 → 输入：“统一圆角8px，图标右对齐，百分比数字用绿色#22C064显示”
- 最后处理筛选器 → 输入：“改成带搜索的下拉选择，选项包括‘本周’‘本月’‘本季度’”
每次只改一块，避免指令冲突导致布局错乱。
导出代码时选对框架并预留数据接口
点击「一键导出代码」时，选 Vue 或 React + Ant Design / Element Plus：
- 它生成的图表容器自带 class 名和 slot 占位，比如
<chart-sales-trend :data="salesData"></chart-sales-trend> - 实际开发时，你只需提供
salesData这个响应式数组，图表库（如 ECharts 或 ApexCharts）就能自动渲染 - 不建议导出纯 HTML+JS，那样图表仍需手动写 canvas 或 SVG，失去联动优势
本质上，MasterGo AI 把设计侧的图表“结构语义”翻译成了前端可理解的组件契约，而不是替代数据层工作。
