AI 与 Apache ECharts 结合生成专业数据可视化图表

4. 获得代码

选中目标示例后，点击左上角的代码编辑。代码编辑界面左侧为代码区（包含 JS 和 TS 代码），右侧为图表预览区。我们需要复制的是完整的 HTML 代码，包括引入 ECharts 库的脚本、图表容器的定义以及图表配置代码。

全选左侧代码区的所有内容（可使用快捷键 Ctrl+A），然后复制（Ctrl+C）。注意：务必确保代码完整复制，遗漏任何部分都可能导致图表无法正常显示。

5. '喂'AI

先上传准备好的文件，然后再把上面复制的代码粘贴过去，在代码前面输入以下提示词：

以下是使用 echarts.js 实现的数据图表代码，帮我将数据换成上传的 Excel 表格中的数据，然后生成可以直接运行的 html5 代码，用浏览器打开可以直接看到图表效果，并可以将图表保存为图片，注意使用国内可以访问的 echarts.js 库

步骤三：本地运行与优化

获取 AI 生成的代码后，还需在本地测试并优化，确保图表效果符合预期。

1. 保存代码为 HTML 文件

在电脑本地新建一个文本文件，将 AI 生成的代码粘贴到文件中。保存文件时，将文件名后缀改为'.html'（如'成绩图表.html'），确保编码格式为 UTF-8（避免中文乱码）。

2. 打开文件查看图表

双击保存的 HTML 文件，将自动用默认浏览器打开。若图表正常显示，说明代码无误；若无法显示，可按以下方法排查：

• 检查代码是否完整，尤其是 ECharts 库的引入链接是否正确；
• 确认数据格式是否正确（如数值是否为数字类型，无多余符号）；
• 打开浏览器'开发者工具'（按 F12），查看'控制台'面板的错误提示，针对性修复。

3. 图表优化技巧

• 样式调整：若对颜色、字体不满意，可在代码中找到'color'字段修改颜色值（支持 RGB、十六进制格式），或通过'textStyle'调整字体大小和样式。
• 交互增强：默认代码通常包含'保存为图片'功能（在图表右上角工具栏），若需添加其他交互（如数据筛选、图表下载），可向 AI 补充指令：'请为图表添加按学科筛选数据的功能'。
• 响应式适配：若图表在不同设备上显示比例失调，可在代码中添加窗口 resize 事件监听，让图表自动适应窗口大小，示例代码：

window.addEventListener('resize', function() { myChart.resize(); }); 

实战案例：用 AI+ECharts 生成学生成绩对比图表

为演示流程，我们以'7 班学生五大学科成绩对比'为例，完整演示从数据到图表的全过程。

案例步骤

1. 准备数据：整理某班学生的语文、数学、英语、物理、化学成绩，保存为 Excel 表格，包含'学生姓名''语文''数学''英语''物理''化学'列。
2. 选择图表类型：因需对比多学科趋势，在 ECharts 示例库选择'梯度堆叠面积图'（适合展示多组数据的叠加趋势）。
3. 获取基础代码：复制'梯度堆叠面积图'的官方示例代码，包含基础配置和示例数据。
4. AI 指令设计：'我已复制 ECharts 梯度堆叠面积图的基础代码，现需用 7 班学生成绩数据替换示例数据，学科包括语文、数学、英语、物理、化学，图表标题改为'7 班各学科成绩趋势对比'，请保留原样式并确保数据正确映射。'
5. 生成与测试：AI 返回代码后，保存为 HTML 文件，打开后可见各学科成绩的堆叠面积图，鼠标悬停可查看每个学生的具体分数。
6. 优化细节：通过 AI 指令调整颜色为'蓝绿渐变系'，添加'平均分参考线'，最终图表清晰呈现各学科成绩分布趋势。

注意事项与进阶技巧

• 数据隐私保护：上传数据至 AI 时，若包含敏感信息（如学生姓名、身份证号），需先匿名化处理（如用'学生 1''学生 2'替代真实姓名）。
• 代码备份：建议保留 AI 生成的原始代码和修改记录，便于后续调整或复用。
• 进阶学习：若需更复杂的图表（如 3D 图表、地理热力图），可先在 ECharts 示例库找到对应示例，再让 AI 结合数据进行修改，同时参考官网文档（使用手册 - Apache ECharts）学习核心配置逻辑。

总结

AI 与 Apache ECharts 的结合，降低了专业图表的制作门槛。从官网获取基础代码、用 AI 替换数据、本地优化展示，这个流程能让零编程基础的用户也能生成高质量图表。无论是学术研究、课堂汇报还是工作汇报，掌握这一技能都能让数据表达更高效、更专业。

但需牢记：AI 是辅助工具，而非'万能钥匙'。最终图表的准确性、原创性仍需使用者负责。合理运用 AI 技术，既能提升效率，又能避免学术规范问题，这才是 AI 工具的正确打开方式。