# 用AI编程5分钟搞定数据可视化：从饼图到桑基图

领导发来一个 Excel 和一张参考图："根据数据画一个类似这样的图。"你一看就懵了——这什么工具画的？怎么从零开始？以后数据变了怎么办？

如果你也有过这种经历，这篇文章教你用 AI 编程，5 分钟生成任何你想要的图表，而且做出来的是一个活的网页工具，数据随时改、随时更新。

前言

先讲一个真实的故事。

小天是一个工程师，领导发给他一个 Excel 和一张参考图，要求根据数据画一个类似的图表。这张图不是普通的饼图——结构复杂、颜色分明、每个扇形长短不一。

他脑子里闪过三个问题：

1. 这到底用什么软件画的？

2. 我该怎么从头开始做？

3. 万一以后数据又变了，难道每次都这么麻烦？

常规思路是打开 Excel 勉强模仿，或者花几天学习专业图表工具。但小天选择了一条更高效的路：用 AI 现场创造一个专属的图表生成器。

结果呢？10 分钟搞定。而且做出来的是一个网页工具，以后数据怎么变，只需要在页面上改改数字就行了。

这篇文章会把这套方法论拆解给你看，覆盖三种最常用的数据可视化场景：饼图、热力图、桑基图。

场景一：交互式饼状图生成器

需求描述

这是最经典的场景——用数据做一张饼图。但我们要的不只是一张静态图，而是一个可以反复修改数据的生成器。

直接把以下需求发给 AI：

请用 ECharts 创建一个饼状图（南丁格尔玫瑰图）：

1. 颜色代表五大分类：黄色-安全韧性、红色-减污降碳、蓝色-健康河湖、绿色-人文宜居、紫色-科学管控

2. 每个分类下有多个子项目（名称和分数），最终图表显示每个子项目的分数占比

3. 关键要求：分数越低，对应的扇形半径要越短

4. 采用 ECharts 图表库实现

5. 最终，我要一个网页，能让我自由修改项目名称和分数

6. 单个HTML文件

AI 生成的核心代码

你不需要看懂全部代码，但理解这几个关键配置会帮你更好地和 AI 沟通：

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）用表格看根本看不过来。用热力图，颜色越深表示越活跃，一眼就能找到高峰时段。

需求描述

请用 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 生成的核心代码

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） 就是展示"流向"的最佳图表——左边的条代表来源，右边的条代表去向，连线粗细代表流量大小。

需求描述

请用 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 生成的核心代码

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 里看起来像拼凑的。统一配色很简单：

// ECharts 全局配色

option = {

color: ['#4A90D9', '#27AE60', '#F39C12', '#E74C3C', '#9B59B6'],

// ...其他配置

};

推荐几套经过验证的配色方案：

| 方案 | 适用场景 | 主色 | |------|---------|------| | 商务蓝 | 通用/正式 | #4A90D9 | | 活力橙 | 运营/营销 | #FF6B35 | | 科技紫 | 技术/产品 | #6C5CE7 |

导出高清图片

// 导出为高清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. 先方案后代码

"你先看看我的需求，给我一个实现方案，先等我确认方案后再实现"

确认 AI 理解了你的需求，再让它写代码。避免方向错误导致的反复修改。

3. 先完成再完美

第一版不可能完美，但只要核心功能到位，后续通过对话微调细节就行：

- "颜色换成蓝色系"

- "标题字体大一点"

- "加一个下载按钮"

写在最后

这篇文章展示了三种最常用的数据可视化场景，但 AI 编程能做到的远不止于此：

- 转化漏斗分析 — 用户从浏览到付款，每一步流失了多少？

- 动态排序柱状图 — Top10 自动排序的动态排名

- 用户路径桑基图 — 发现流量流失节点

- 多图表联动 — 点品类，数据跟着变

- 响应式数据看板 — 手机上也能看

核心就一句话：编程的门槛正在消失，创造力的时代正在到来。 技术不再是实现想法的壁垒，真正的门槛是你能否把一个模糊的念头清晰地说出来。

更多 AI 编程实战案例（100+ 期完整代码与提示词），欢迎关注我的小报童专栏。从零开始，用 AI 把你的每一个想法变成现实。

---

*如果这篇文章对你有帮助，欢迎点赞收藏。有问题欢迎评论区交流。*