前言
当你把 AI 当人看之后,你就会发现,他是多么好用的高效工具。而本期将聚焦一个更具实用性的场景 —— 如何通过 AI 与 Apache ECharts 的结合,快速生成各类专业图表,让数据可视化变得简单高效。无论是学术报告中的数据分析、课堂展示中的成果汇报,还是日常工作中的数据总结,专业的图表都能让复杂信息变得直观易懂。但传统图表制作往往需要掌握编程知识或复杂工具,门槛较高。而 AI 与 Apache ECharts 的组合,能让零编程基础的用户也能轻松生成高质量图表,这正是我们本期要解锁的核心技能。
技术栈说明
在开始实操前,我们先明确本次使用的核心工具,这些工具的组合将成为高效生成专业图表的'黄金搭档':
- AI 工具:本文以主流 AI 工具为例(如 DeepSeek、Kimi、GPT 等),具备强大的自然语言理解能力和代码生成能力,能根据用户需求快速处理数据并优化代码,尤其适合对编程不太熟悉的用户。
- Apache ECharts:一款由百度开源的专业数据可视化库,目前由 Apache 软件基金会维护。它支持数十种图表类型,交互功能丰富,且完全免费开源,是数据可视化领域的主流工具之一。其官网提供了丰富的示例库和详细文档,为初学者提供了极大便利。
步骤一:介绍
在开始实操前,我们需要先了解 Apache ECharts 的核心优势,这样才能更好地发挥其价值。
什么是 Apache ECharts?
Apache ECharts 是一款基于 JavaScript 的开源可视化库,它能够将数据通过折线图、柱状图、散点图、热力图、雷达图等数十种图表形式直观呈现,且支持高度定制化的交互功能。自 2013 年开源以来,它凭借强大的功能和易用性,被广泛应用于数据分析、业务监控、学术研究、教学展示等场景。
ECharts 的核心优势
丰富的图表类型:涵盖基础图表(折线图、柱状图)、统计图表(箱线图、漏斗图)、地理图表(地图、热力图)、3D 图表等,满足不同场景的数据可视化需求。例如在学术研究中,可通过折线图展示数据趋势,用雷达图对比多维度指标;在业务汇报中,可用柱状图对比业绩数据,用饼图展示占比关系。 强大的交互能力:支持鼠标悬停显示详细数据、图表缩放、数据筛选、区域选择等交互操作。这让图表不再是静态的图片,而是能让观众'探索数据'的动态工具。比如在展示学生成绩时,鼠标悬停在某一数据点上,可立即显示该学生的具体分数、班级排名等信息。 高度定制化:从颜色、字体、图例到坐标轴样式,几乎图表的每一个细节都可通过代码调整,能完美适配不同的展示场景(如学术报告的严谨风格、课堂展示的活泼风格)。 跨平台兼容性:生成的图表可在电脑、平板、手机等多种设备上流畅显示,且支持导出为图片格式(PNG、JPG),方便插入文档或 PPT。 开源免费:完全开源且无商业使用限制,无需担心版权问题,适合学生、科研人员、企业用户等各类群体使用。
步骤二:部署
1. 汉化
进入 ECharts 官方首页。官网默认语言为英文,对于英文基础较弱的用户,可先进行汉化设置。
2. 进入示例库
进入所有示例。示例库支持按'图表类型'标签筛选。例如需要展示多组数据的趋势对比,可选择'折线图'分类;若要对比不同类别数据的数值大小,可选择'柱状图';若要展示数据占比,可选择'饼图'或'环形图'。点击任意示例图表,即可查看其效果、代码和数据说明。建议在选择时优先查看'官方示例',这些示例代码规范、注释清晰,更适合作为基础模板修改。
3. 选择模型
这里我们选择折线图中的渐变面积堆叠图。
4. 获得代码
选中目标示例后,点击左上角的代码编辑。代码编辑界面左侧为代码区(包含 JS 和 TS 代码),右侧为图表预览区。我们需要复制的是完整的 HTML 代码,包括引入 ECharts 库的脚本、图表容器的定义以及图表配置代码。全选左侧代码区的所有内容(可使用快捷键 Ctrl+A),然后复制(Ctrl+C)。注意:务必确保代码完整复制,遗漏任何部分都可能导致图表无法正常显示。
5. '喂'AI
先上传准备好的文件,然后再把上面复制的代码粘贴过去,在代码前面输入以下提示词:
以下是使用 echarts.js 实现的数据图表代码,帮我将数据换成上传的 Excel 表格中的数据,然后生成可以直接运行的 html5 代码,用浏览器打开可以直接看到图表效果,并可以将图表保存为图片,注意使用国内可以访问的 echarts.js 库


