用AI编程5分钟搞定数据可视化：从饼图到桑基图
领导发来一个 Excel 和一张参考图："根据数据画一个类似这样的图。"你一看就懵了------这什么工具画的？怎么从零开始？以后数据变了怎么办？
如果你也有过这种经历，这篇文章教你用 AI 编程，5 分钟生成任何你想要的图表，而且做出来的是一个活的网页工具，数据随时改、随时更新。
前言
先讲一个真实的故事。
小天是一个工程师，领导发给他一个 Excel 和一张参考图，要求根据数据画一个类似的图表。这张图不是普通的饼图------结构复杂、颜色分明、每个扇形长短不一。
他脑子里闪过三个问题：
- 这到底用什么软件画的？
- 我该怎么从头开始做？
- 万一以后数据又变了，难道每次都这么麻烦？
常规思路是打开 Excel 勉强模仿，或者花几天学习专业图表工具。但小天选择了一条更高效的路：用 AI 现场创造一个专属的图表生成器。
结果呢？10 分钟搞定。而且做出来的是一个网页工具，以后数据怎么变，只需要在页面上改改数字就行了。
这篇文章会把这套方法论拆解给你看，覆盖三种最常用的数据可视化场景：饼图、热力图、桑基图。
场景一：交互式饼状图生成器
需求描述
这是最经典的场景------用数据做一张饼图。但我们要的不只是一张静态图，而是一个可以反复修改数据的生成器。
直接把以下需求发给 AI：
markdown
请用 ECharts 创建一个饼状图（南丁格尔玫瑰图）：
1. 颜色代表五大分类：黄色-安全韧性、红色-减污降碳、蓝色-健康河湖、绿色-人文宜居、紫色-科学管控
2. 每个分类下有多个子项目（名称和分数），最终图表显示每个子项目的分数占比
3. 关键要求：分数越低，对应的扇形半径要越短
4. 采用 ECharts 图表库实现
5. 最终，我要一个网页，能让我自由修改项目名称和分数
6. 单个HTML文件AI 生成的核心代码
你不需要看懂全部代码，但理解这几个关键配置会帮你更好地和 AI 沟通：
javascript
option = {
// 南丁格尔玫瑰图的关键配置
series: [{
type: 'pie',
roseType: 'area', // 'area'让扇形半径和数值成正比
radius: ['15%', '70%'],
data: [
{ value: 40, name: '项目A' },
{ value: 38, name: '项目B' },
{ value: 32, name: '项目C' },
// ...
],
label: {
formatter: '{b}: {c}分 ({d}%)' // 显示名称、分数、百分比
}
}]
};关键点：
roseType: 'area'--- 这是南丁格尔玫瑰图的核心，扇形半径和数值成正比- 数据直接修改
data数组就行，刷新页面图表自动更新
效果
场景二：用户活跃度热力图
为什么需要热力图？
运营小李想知道：一周 7 天，每天 24 小时，用户什么时候最活跃？有了这个数据，他就能选择最佳时间发布内容和活动。
但 168 个数据点（7x24）用表格看根本看不过来。用热力图，颜色越深表示越活跃，一眼就能找到高峰时段。
需求描述
diff
请用 ECharts 创建一个用户活跃度热力图，要求：
标题："一周用户活跃度热力图"
X轴：0时-23时（24小时）
Y轴：周一到周日
数据格式：[小时, 星期几, 活跃用户数]
请生成168个数据点（7天x24小时），模拟以下规律：
- 工作日（周一到周五）：12-13点午休高峰，20-22点晚间高峰
- 周末（周六周日）：10-12点上午活跃，14-16点下午活跃，20-22点晚间高峰
- 凌晨2-6点活跃度最低
颜色映射：
- 低活跃：浅蓝/白色
- 中活跃：黄色/橙色
- 高活跃：红色/深红
悬浮显示：X月X日 X时，活跃用户XXX人
添加"下载图片"按钮，单个HTML文件。AI 生成的核心代码
javascript
option = {
xAxis: {
type: 'category',
data: ['0时', '1时', ..., '23时'], // 24小时
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: ['周一', '周二', ..., '周日'], // 7天
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 1000,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '5%',
inRange: {
color: ['#EBF5FB', '#85C1E9', '#F39C12', '#E74C3C', '#922B21']
// 从浅蓝到深红的颜色梯度
}
},
series: [{
type: 'heatmap', // 热力图类型
data: [
[0, 0, 120], // [小时, 星期, 活跃用户数]
[1, 0, 80],
// ... 168个数据点
],
label: { show: false }
}]
};关键点：
type: 'heatmap'--- ECharts 的热力图类型visualMap--- 控制颜色映射范围和梯度，从浅蓝（低）到深红（高）- 数据格式是
[x, y, value]三元组
效果
一张 7x24 的热力图，颜色越深代表越活跃。一眼就能看出：
- 工作日晚间 20-22 点是活跃高峰
- 凌晨 2-6 点几乎没人
- 周末上午 10-12 点有一个小高峰
这就是热力图的威力------168 个数据点，一张图就能讲清楚。
场景三：用户路径桑基图
为什么需要桑基图？
运营小李想分析用户在网站上的浏览路径：
首页 → 有的人去了搜索页 → 有的人去了推荐页 → 有的人直接离开了
他需要回答：用户从每个页面流向了哪里？哪条路径流量最大？哪个页面跳出率最高？
桑基图（Sankey Diagram） 就是展示"流向"的最佳图表------左边的条代表来源，右边的条代表去向，连线粗细代表流量大小。
需求描述
erlang
请用 ECharts 创建一个用户路径桑基图，要求：
标题："用户浏览路径分析"
数据（从左到右3层）：
来源层 → 中间页 → 目标页：
- 首页(10000) → 搜索页(4000) → 商品详情(3200)
- 首页(10000) → 推荐页(3000) → 商品详情(2400)
- 首页(10000) → 活动页(1500) → 商品详情(800)
- 首页(10000) → 直接离开(1500)
- 搜索页(4000) → 加入购物车(2000)
- 推荐页(3000) → 加入购物车(1500)
- 活动页(1500) → 加入购物车(600)
- 商品详情(6400) → 加入购物车(3500)
- 商品详情(6400) → 离开(2900)
- 加入购物车(7600) → 完成支付(4500)
- 加入购物车(7600) → 放弃(3100)
要求：
1. 3层节点：来源、中间页、目标页
2. 连线粗细和流量成正比
3. 悬浮显示流量数值
4. 节点颜色区分层次
5. 单个HTML文件AI 生成的核心代码
javascript
option = {
series: [{
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency' // 悬浮时高亮相邻节点和连线
},
nodeAlign: 'left',
data: [
{ name: '首页' },
{ name: '搜索页' },
{ name: '推荐页' },
{ name: '活动页' },
{ name: '商品详情' },
{ name: '加入购物车' },
{ name: '完成支付' },
{ name: '直接离开' },
{ name: '离开' },
{ name: '放弃' }
],
links: [
{ source: '首页', target: '搜索页', value: 4000 },
{ source: '首页', target: '推荐页', value: 3000 },
{ source: '首页', target: '活动页', value: 1500 },
{ source: '首页', target: '直接离开', value: 1500 },
{ source: '搜索页', target: '商品详情', value: 3200 },
{ source: '推荐页', target: '商品详情', value: 2400 },
// ...更多links
]
}]
};关键点：
type: 'sankey'--- 桑基图类型emphasis: { focus: 'adjacency' }--- 悬浮时自动高亮关联路径，其他路径淡化data定义节点，links定义连线，value控制连线粗细
效果
通过桑基图可以清晰看到：
- 首页 → 搜索页 → 商品详情 是流量最大的路径（4000 → 3200）
- 首页直接离开 的用户有 1500 人，占 15%
- 加入购物车 → 完成支付 转化率约 59%，放弃率 41%
- 商品详情 → 离开 是最大的流失节点（2900 人）
这就是桑基图的威力------流量流向一目了然，流失节点无处遁形。
配色与导出：让图表更专业
统一配色方案
图表做好了，但如果每张图颜色都不一样，放到 PPT 里看起来像拼凑的。统一配色很简单：
javascript
// ECharts 全局配色
option = {
color: ['#4A90D9', '#27AE60', '#F39C12', '#E74C3C', '#9B59B6'],
// ...其他配置
};推荐几套经过验证的配色方案：
| 方案 | 适用场景 | 主色 |
|---|---|---|
| 商务蓝 | 通用/正式 | #4A90D9 |
| 活力橙 | 运营/营销 | #FF6B35 |
| 科技紫 | 技术/产品 | #6C5CE7 |
导出高清图片
javascript
// 导出为高清PNG
var imgData = chart.getDataURL({
type: 'png',
pixelRatio: 2, // 2倍像素密度
backgroundColor: '#fff'
});
var link = document.createElement('a');
link.href = imgData;
link.download = '图表名称.png';
link.click();
pixelRatio: 2是关键------2 倍像素密度，导出的图片在 Retina 屏幕上也清晰锐利。
技术栈总结
| 图表类型 | ECharts 类型 | 适用场景 |
|---|---|---|
| 玫瑰饼图 | pie + roseType: 'area' |
分类占比、数据构成 |
| 热力图 | heatmap |
时间分布、密度分析 |
| 桑基图 | sankey |
用户路径、流量流向 |
共同特点：
- 单个 HTML 文件，无需任何构建工具
- 数据存储在 JavaScript 数组中，修改即更新
- 支持交互（悬浮、点击、缩放）
- 一键导出高清图片
AI 编程做可视化的方法论
通过以上三个场景，我们可以提炼出一套通用方法论：
1. 需求描述 = 80% 的工作
想清楚 → 写清楚 → 说清楚不需要你懂代码，但需要你能用自然语言清晰描述你想要什么。具体到：图表类型、数据格式、布局方式、交互逻辑、视觉要求。
2. 先方案后代码
arduino
"你先看看我的需求，给我一个实现方案，先等我确认方案后再实现"确认 AI 理解了你的需求，再让它写代码。避免方向错误导致的反复修改。
3. 先完成再完美
第一版不可能完美，但只要核心功能到位，后续通过对话微调细节就行：
- "颜色换成蓝色系"
- "标题字体大一点"
- "加一个下载按钮"
写在最后
这篇文章展示了三种最常用的数据可视化场景，但 AI 编程能做到的远不止于此：
- 转化漏斗分析 --- 用户从浏览到付款，每一步流失了多少？
- 动态排序柱状图 --- Top10 自动排序的动态排名
- 用户路径桑基图 --- 发现流量流失节点
- 多图表联动 --- 点品类，数据跟着变
- 响应式数据看板 --- 手机上也能看
核心就一句话：编程的门槛正在消失，创造力的时代正在到来。 技术不再是实现想法的壁垒，真正的门槛是你能否把一个模糊的念头清晰地说出来。
更多 AI 编程实战案例（100+ 期完整代码与提示词），欢迎关注我的小报童专栏。从零开始，用 AI 把你的每一个想法变成现实。
如果这篇文章对你有帮助，欢迎点赞收藏。有问题欢迎评论区交流。