在后台看销售报表，有折线图、柱状图，想采集图表里的数据做进一步分析。
问题：图表是图片或Canvas画出来的，没有文字可以抓取。
解决方法：用影刀的“图表数据提取”指令（或OCR识别+坐标推算）。
本文给出两种方案：官方指令法（简单）和OCR备选法（兼容旧版）。
一、图表提取的两种方案对比
| 方案 | 原理 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|---|
| 官方指令 | 解析图表底层数据 | ECharts、Highcharts等JS图表库 | 直接拿到数值 | 仅支持特定库 |
| OCR识别 | 截图+识别文字 | 任何图表（包括图片） | 通用 | 需要坐标推算 |
影刀专属指令：指令面板搜索“图表数据提取”（部分版本支持）。
如果不支持，用备选OCR方案。
二、方案一：图表数据提取指令（推荐）
适用条件：网页图表是用ECharts、Highcharts等主流JS库渲染的。
影刀可以读取图表内部数据，不需要OCR。
操作步骤：
- 打开包含图表的网页。
- 捕获图表所在的容器元素（
div或canvas的父级）。 - 拖入“图表数据提取”指令。
4. 选择目标元素（图表容器）。
- 设置提取类型：折线图数据 / 柱状图数据 / 饼图数据。
- 输出到变量（通常是列表或字典）。
# 指令配置示例
# 图表数据提取
# 目标元素：div_chart_container
# 图表类型：折线图
# 输出到：chart_data（列表，每个元素是{“x”: 月份, “y”: 销售额}）
# 输出示例：
# chart_data = [
# {"x": "1月", "y": 12000},
# {"x": "2月", "y": 15000},
# ...
# ]
常见问题：
如果图表是动态加载的，需要在提取前加“等待元素出现”（图表容器）。
如果图表数据太大（超过1000个点），输出可能会卡，建议分批。
三、方案二：OCR备选法（万能但复杂）
原理：截图图表区域 → 用OCR识别坐标轴数字 → 推算每个柱/点的值。
适用场景：
- 图表是静态图片（如PNG）
- 官方指令不支持该图表库
- 需要从PDF或图片中提取图表数据
操作步骤（以柱状图为例）：
- 捕获图表区域：截取整个图表所在的元素，保存为图片。
- 识别Y轴刻度：截取Y轴数字区域，用“OCR识别文本”获取数字及对应像素位置。
- 识别柱子的像素高度：每个柱子顶部Y坐标与底部Y坐标的差值。
4. 数值换算：根据Y轴刻度值范围与像素高度比例，反推柱子的数值。
# 影刀流程（简略）
# 1. 截图图表区域
# 屏幕截图 → 保存为 chart.png
# 2. 用Python代码 + OCR库识别（需要安装 pytesseract）
# 这里仅示意逻辑，实际需要很多像素处理
# 更简单的替代：用“取色”指令判断柱子顶部位置
# 不推荐新手尝试，过于复杂
💡 强烈建议：不要轻易走OCR这条路。
优先用“图表数据提取”指令；如果不行，尝试找图表背后的数据接口（Network抓包）。
四、实战：从ECharts折线图提取月度销售数据
场景：商家后台的销售趋势图（ECharts），想拿到每个月的具体数值。
操作步骤：
- 打开后台，等待图表加载完成。
- 捕获图表容器（通常是一个
<div>，有_echarts_instance_属性）。 - 拖入“图表数据提取”指令，类型选“折线图”。
4. 输出到
line_data。
- 用“列表循环”遍历
line_data，写入Excel。
# 循环写入示例
# 列表循环 line_data，当前项 item
# - 月份 = {item['x']}
# - 销售额 = {item['y']}
# - 追加行到Excel：[月份, 销售额]
如果官方指令不可用：
用“执行JavaScript”指令，在浏览器控制台中直接获取ECharts实例的数据。
// JavaScript代码（放到影刀的“执行JavaScript”指令中）
// 假设图表容器 id 为 "chart"
var chart = echarts.getInstanceByDom(document.getElementById('chart'));
var option = chart.getOption();
var seriesData = option.series[0].data;
return JSON.stringify(seriesData);
影刀中执行：
拖入“执行JavaScript”指令，填写上述代码，输出到变量 chart_json，再用“解析JSON”指令转成列表。
五、饼图数据提取
饼图要提取每个扇区的名称和数值。
官方指令法：类型选“饼图”，输出示例：
[
{"name": "品类A", "value": 35},
{"name": "品类B", "value": 45},
{"name": "品类C", "value": 20}
]
JS备选法（适用于ECharts）：
var chart = echarts.getInstanceByDom(document.getElementById('pieChart'));
var option = chart.getOption();
var seriesData = option.series[0].data;
return JSON.stringify(seriesData);
六、注意事项与常见坑
| 坑 | 说明 | 解决方法 |
|---|---|---|
| 图表数据提取指令不可用 | 版本太低或图表库不兼容 | 升级影刀或用JS备选 |
| 提取的数据顺序错乱 | 图表有多个系列 | 指定系列索引（如 seriesIndex:0） |
| 提取到的数值是字符串 | 可能需要转数字 | 用“类型转换”转整数 |
| 图表懒加载 | 滚动到可视区域才渲染 | 先“滚动到元素”触发加载 |
| 数据量太大导致卡死 | 一次提取几千个点 | 分页或降采样 |
版本支持：影刀3.5以上版本支持“图表数据提取”指令。
社区版可用但建议先升级。
七、影刀专属操作清单
| 操作 | 精确指令 | 说明 |
|---|---|---|
| 图表数据提取 | 图表数据提取 | 选择容器元素和图表类型 |
| 执行JavaScript | 执行JavaScript | 备选方案，需懂一点JS |
| 截图图表 | 屏幕截图 | 用OCR备选时用 |
| OCR识别 | OCR识别文本 | 识别图片中的数字 |
| 解析JSON | 解析JSON | 将JS返回的字符串转成列表 |
常见问题速查
| 问题 | 原因 | 解决方法 |
|---|---|---|
| 图表数据提取报“不支持该图表” | 图表库不是ECharts/Highcharts | 改用JS备选或OCR |
| JS代码执行后返回空 | 图表未加载完成 | 先等待图表元素出现 |
| OCR识别数字不准 | 字体或背景干扰 | 调整截图区域，增加对比度 |
| 提取的数据比实际少 | 图例折叠了 | 先展开全部图例再提取 |
推荐资源
- 影刀官方帮助中心：《图表数据提取指令详解》
- ECharts官方教程：了解如何通过
getOption()获取数据 - 实操练习：找一个ECharts官方示例页面，用“执行JavaScript”提取数据
最后一句：图表数据提取是相对高阶的功能。
优先找图表背后的数据接口（Network抓包），比从图表提取更准更简单。
如果非要从图表拿，先用官方指令，不行再JS，OCR是最后的选择。
作者：林焱
本文为《影刀RPA学习手册》系列文章之一，内容源于实操经验的整理与分享。