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

如果你也有过这种经历。下面先把常见痛点列出来让我们知道为什么传统方法会让你抓狂：

• 每次更新数据都得重新绘图，耗时耗力。
• 没有专业可视化软件，必须花费数小时学习。
• 手工制作后续维护成本高，容易出现错误。
• 交互式需求难以实现，往往只能得到静态图片。

前言

先讲一个真实的故事。

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

他脑子里闪过三个问题：

1. 这到底用什么软件画的？
2. 我该怎么从头开始做？
3. 万一以后数据又变了难道每次都这么麻烦？

痛点：

• 工具不确定性：不知道该选哪款软件能满足需求。
• 学习曲线陡峭：必须掌握多种软件或代码框架。
• 维护成本高：每次修改都需重新导入、调整样式。按理说，

常规思路是打开 Excel 勉强模仿。或者花几天学习专业图表工具。但小天选择了一条更高效的路：用 AI 现场创造一个专属的图表生成器。结果呢，分钟搞定。而且做出来的是一个网页工具，以后数据怎么变。只需要在页面上改改数字就行了。

至于场景一。交互式饼状图生成器

需求描述 & 痛点提示

This is classic scenario—creating a pie chart from data—but not just a static image: you want an interactive generator that can be updated on--fly.

• 缺少可编辑性： 一旦生成后无法轻松修改数值与标签，需要重新跑代码。
• 颜色与比例不匹配： 数据越低扇形半径应缩短，但手工设置易出错。

A direct prompt to AI:

颜色代表五大分类：黄色-安全韧性、红色-减污降碳、蓝色-健康河湖、绿色-人文宜居、紫色-科学管控。按理说，每个分类下有多个子项目，最终图表显示每个子项目的分数占比。说到关键要求，分数越低，对应的扇形半径要越短。采用 ECharts 图表库实现。最终，我要一个网页，能让我自由修改项目名称和分数。单个HTML文件

AI 生成主要代码

option = {
series的观点是。
data:,label: {
formatter: '{b}: {c}分 '
}
}]
};

• roseType:'area': 扇形半径与数值成正比，实现“低值扇形缩短”。
• data 可直接编辑 → 页面刷新即更新，无需重跑脚本。

效果预览

至于场景二，使用者活跃度热力图

为什么需要热力图？& 痛点说明

运营小李想知道：一周几天每小时使用者什么时候最活跃？按理说，有了这个信息，可以精准投放内容和活动。说起来，但 单纯的数据表格让人眼花缭乱；而且对非技术人员而言绘制热力图非常困难！

需求描述

请用 ECharts 创建一个使用者活跃度热力图，要求：
"一周使用者活跃度热力图"
说到X轴，0时 - 23时
再看Y轴，周一到周日
至于数据格式，请生成168个数据点，模拟以下规律：
说到工作日。- 13点午休高峰，- 22点晚间高峰
说到周末，- 12点上午活跃，- 16点下午活跃，- 22点晚间高峰
凌晨2~6点活跃度最低
从颜色映射来看，- 低活跃：浅蓝/白色
- 中活跃：黄色/橙色
- 高活跃：红色/深红
悬浮显示的观点是，"X月X日 X时 活跃使用者XXX人"
添加"下载图片"按钮，单个HTML文件。

AI 主要代码片段

option = {
xAxis:{
type这方面，'category',data:,splitArea:{show:true}
},yAxis:{
type这方面，'category'。data:,splitArea:{show:true}
},visualMap:{
从min来看，,max:,calculable:true,orient:'horizontal',left:'center',bottom:'10%',inRange:{color:}
},series:,//…168项
]
}]
}，

• type:"heatmap": 用于密集时间序列展示。老实说，
• 'visualMap': 自定义颜色梯度。从浅蓝到深红直观呈现活动强度。

效果预览

场景三这方面，使用者方法桑基图

为什么需要桑基图？& 痛点概述

运营小李想分析访问者在各页面之间的流动方法，却苦于缺乏可视化展示“流向”与“数量”的工具；说起来，传统柱状或折线无法体现流量大小与转化漏斗！

需求描述

请用 ECharts 创建一个使用者方法桑基图，请求：
"使用者浏览方法分析"
层级结构这方面。示例链路：
首页 → 搜索页 → 商品详情
首页 → 推荐页 → 商品详情
首页 → 活动页 → 商品详情
首页 → 直接离开
搜索页 → 加入购物车
推荐页 → 加入购物车
活动页 → 加入购物车
商品详情 → 加入购物车
商品详情 → 离开
加入购物车 → 完成支付
加入购物车 → 放弃
要求的观点是，• 三层节点；连线粗细与流量成正比，• 悬浮显示流量数值；• 节点颜分层次，• 单个HTML文件。

AI 主要代码片段

option = {
说到series，,links:
}]
};

• $type的观点是，$sankey$是绘制流向关系所必需;– $emphasis.$focus:$adjacency$使悬浮时自动聚焦相关链路;– $nodes$ 与 $links$ 的组合决定整体结构;每条 $link.value$ 控制线条粗细还有悬浮显示;– <

   
  
  *注意此处已截断示例代码。
  仅供演示，请按需完整填充！
  *
  

  *效果预览示意*: