影刀RPA进阶教程：图表数据提取教程——折线图/柱状图/饼图的数据获取指令 - 文章 - 开发者社区

做竞品分析时，经常遇到网页上的销售额趋势图、占比饼图，想把这些图表数据扒下来。图表是图片或Canvas画的，用常规XPath根本取不到数字。但图表的原始数据其实藏在网页的JavaScript变量或SVG标签里。

picture.image 核心方法：通过浏览器开发者工具找到图表的数据源——一般是ECharts/Highcharts的配置对象，或者SVG的text标签，然后用影刀提取。

一、图表数据的三种来源

picture.image

图表类型	数据存储位置	提取难度
ECharts/Highcharts库渲染	window对象中的JS变量	中等（需执行JS）
SVG矢量图（如简单统计图）	`<text>` 或 `<g>` 标签内	较低（XPath可抓）
Canvas像素图（截图式）	无结构化数据	高（需OCR）

picture.image

90%的网页图表（淘宝生意参谋、京东商智、飞书仪表盘）都用ECharts，数据藏在JS里。

picture.image

二、方法1：从ECharts配置中提取数据（最常用）

ECharts图表的数据通常存在 window.myChart 或 echarts.getInstanceByDom() 中。

操作步骤

picture.image

打开目标网页，按F12进入控制台
输入 window.myChart.getOption() 查看是否有数据
如果有，记下数据所在的属性路径（如 series[0].data）
在影刀中用“执行JavaScript代码”指令提取

picture.image

# 影刀中：Python代码指令（或JS指令）
# 输入：无
# 输出：图表数据列表

![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/35ba114271dc4f0c94cb7422fbe9bf71~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1781666599&x-signature=LNN%2F1J%2BhkhHwIY6p13v8HHlyPC0%3D)

import json

# 方法1：通过已知的ECharts实例
js_code = """

![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/ebceec683d1d4e29ba408cf12a20188a~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1781666599&x-signature=vmzdaBHCKK%2BajVyg78kgwrGD5Ho%3D)
var dom = document.querySelector('你的图表容器选择器');
var chart = echarts.getInstanceByDom(dom);
if (chart) {
    var option = chart.getOption();
    var data = option.series[0].data;  // 柱状图/折线图的数据
    return JSON.stringify(data);
}
return '[]';
"""

# 用影刀的“执行JavaScript代码”指令
# 返回值存入“图表数据JSON”

# 解析JSON
图表数据列表 = json.loads(图表数据JSON)
output_图表数据 = 图表数据列表

实战案例：某电商后台的销售额趋势图

# 定位图表容器（通过class或id）
执行JavaScript代码：
    var chartDom = document.querySelector('#sales-trend-chart');
    var chart = echarts.getInstanceByDom(chartDom);
    var option = chart.getOption();
    var xAxis = option.xAxis[0].data;   // 日期：['1月','2月','3月']
    var series = option.series[0].data; // 销售额：[12000, 15000, 18000]
    
![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/44ffbde7ca184100b28eb05d70b755a6~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1781666599&x-signature=98Ni2W0isg%2F0GpKoiay%2Bz8Yrpvg%3D)
    return JSON.stringify({xAxis: xAxis, series: series});

# 输出示例：{"xAxis":["1月","2月","3月"],"series":[12000,15000,18000]}

注意： 如果图表容器有id，直接用 echarts.getInstanceByDom(document.getElementById('xxx'))。

二、方法2：找不到echarts实例时，暴力搜索全局变量

有些网站把图表数据挂在 window 上，但没暴露实例。可以搜索所有包含图表数据的变量。

# 执行JS，遍历window对象找包含特定关键词的数据
js_code = """
var result = null;
for (var key in window) {
    try {
        var obj = window[key];
        if (obj && typeof obj === 'object') {
            // 搜索包含 'data' 或 'series' 字段的对象
            if (obj.data && Array.isArray(obj.data) && obj.data.length > 0) {
                result = obj.data;
                break;
            }
            if (obj.series && Array.isArray(obj.series)) {
                result = obj.series;
                
![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/897fccf452ab4266b55d0c403ea6688b~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1781666599&x-signature=1tt1TAvm%2BAOczr0YfYzkVAUGma4%3D)
                break;
            }
        }
    } catch(e) {}
}
return JSON.stringify(result);
"""

三、方法3：从SVG标签提取文本（简单图表）

如果图表是用SVG绘制的简单统计图（如Google Charts、基础柱状图），数据可能直接写在 <text> 标签里。

操作步骤

捕获图表区域的SVG容器
获取所有 <text> 标签的内容
过滤出数值和标签

# 示例：页面上有一个柱状图，每个柱子顶部有数值文本
# XPath定位所有数值文本
获取相似元素列表：//svg//text[@class='value'] → 存入“数值元素列表”
循环元素列表：
    获取元素文本 → 存入“数值”

# 同理，获取横轴标签
获取相似元素列表：//svg//text[@class='axis-label'] → 存入“标签列表”

使用场景： 简单的开源图表库或内部工具生成的图表。

四、方法4：Canvas图表最后手段——OCR识别

如果图表是Canvas绘制且完全无法从JS提取数据（极少数），只能用截图+OCR。

操作步骤

屏幕截图图表区域
调用OCR接口（如百度OCR、Tesseract）识别数字
解析识别结果

# 1. 截图图表区域
屏幕截图：保存路径"C:\chart.png"，截取区域=捕获图表容器

# 2. 调用HTTP请求到OCR服务（以百度OCR为例）
发送HTTP请求
    URL：https://aip.baidubce.com/rest/2.0/ocr/v1/general
    请求方式：POST
    Body：image={图片base64}
    返回：识别结果

# 3. 解析返回的文本，提取数字
# 需要额外处理坐标排列顺序（按y坐标分组）

不推荐： 慢、不准、费时长。仅在前3种方法都无效时备用。

五、实战：从生意参谋趋势图提取每日访客数

生意参谋的折线图是ECharts渲染，数据在 window.ecoData 或 chartInstance 中。

# 影刀流程

# 1. 登录生意参谋，进入“流量看板”

# 2. 等待图表加载
等待元素出现：//div[@class='chart-container']，超时8秒

# 3. 执行JS提取数据
执行JavaScript代码：
    var chartDiv = document.querySelector('#trend-chart');
    var chart = echarts.getInstanceByDom(chartDiv);
    if (chart) {
        var option = chart.getOption();
        var dates = option.xAxis[0].data;
        var visitors = option.series[0].data;
        var result = [];
        for (var i = 0; i < dates.length; i++) {
            result.push({date: dates[i], uv: visitors[i]});
        }
        return JSON.stringify(result);
    }
    return '[]';

# 4. 解析并写入Excel
解析JSON → 存入“图表数据列表”
Excel Workbook打开：文件"趋势数据.xlsx"
写入表头：["日期", "访客数"]
循环列表：图表数据列表
    追加行：[日期, 访客数]
保存关闭

六、易错速查表

问题	原因	解决方法
`echarts.getInstanceByDom` 返回null	图表还没渲染完，或容器选择器不对	加固定等待2-3秒，或找正确的容器id
获取到的数据是旧数据	图表更新后实例没刷新	刷新页面后重新执行JS
JS执行报跨域问题	影刀执行JS的上下文限制	在浏览器控制台先测试，确认能跑通
SVG抓到的文本夹杂坐标值	误取了其他text标签	用更精确的XPath，比如`//text[contains(@class,'data-label')]`
OCR识别数字错误	字体小、背景杂	截图前放大页面（Ctrl + +）

七、调试技巧：在浏览器控制台先验证

写任何JS代码前，先在F12控制台手动跑一遍。

// 在控制台逐步测试
// 1. 找图表容器
var dom = document.querySelector('.chart');
console.log(dom);

// 2. 尝试获取echarts实例
var chart = echarts.getInstanceByDom(dom);
console.log(chart);

// 3. 拿到配置
var opt = chart.getOption();
console.log(opt.series[0].data);

// 4. 确认数据路径正确后，再复制到影刀

八、推荐资源

ECharts官方文档：echarts.apache.org（搜索“getOption”）
Chrome插件：ECharts Inspector（可以查看页面上的ECharts实例和数据）
我的经验：图表数据提取的关键是“找对JS变量名”，多用控制台打印window对象，搜data、series、categories等关键词

作者：林焱

本文为《影刀RPA学习手册》系列文章之一，内容源于实操经验的整理与分享。