js获取网页echarts图表中的数据

写在前面

最近接到某网站的爬虫需求，因为客户与目标网站是通过协议获取的账号，所以不希望从接口获取数据，而网页源代码无法获取完整的canvas数据，怎么办呢，需求还是得做。

实现思路

后来发现，echarts是动态图表，当鼠标移动到某处时，会高亮该处数据，并实时更改某个div的text内容，观察network接口，没有新的请求(也不可能有)，说明数据已经存储在某个js变量里了，我就去瞅了一下echarts渲染数据时使用的函数：

var chart = echarts.init(document.getElementById("map"+Id),'write',{renderer:'canvas'});
/*...*/
chart.setOption(result.data);

这是我的个人网站渲染疫情可视化地图时使用的代码，result.data里是原始数据，调用的是setOption方法。
F12打开Chrome控制台，输入echarts，可以看到这个函数具体内容，然后依葫芦画瓢，找到与目标图表关联的div，用echarts包装一下：
var chart = echarts.init(document.getElementById("map1"));
然后在chart里面找到了getOption方法，好，跟setOption方法对上了，那就执行一下：
chart.getOption()
接着可以点击属性看看内容了，最后找到了series[0].data，也就是这样的：
chart.getOption().series[0].data
这里面保存了原始数据，跟从接口里面获取到的一样，如果需要图例之类的，在周围找找就好啦，over~

九折水瓶？

over是不可能over的~
如果用python来获取，就要用到selenium的执行js功能，首先用driver打开目标页面（这一段就自己来吧），然后执行如下代码：

js = """
    var chart = this.window.echarts.init(document.getElementById("{}"));
    var data = chart.getOption().series[0].data;
    return data;
"""
# format里面写echarts关联div的id
data = driver.execute_script(js.format("map1"))
print(data)

就可以拿到数据了。