【前端JS】网页折线图数据下载——EChart.js初涉

 

---

网站一

任务描述

• 下载网页折线图中的数据
• 注：这并非普通的静态图表，像是传说中的Echart——基于JavaScript语言编写的前端数据可视化插件。

网页Echart图表截图

 

 

思考尝试

• 手动整理：对于我等懒人来说，能动手就不想动脑。第一反应当然是：手动移鼠标，人工整理数据。2000个数据点，预计7~8小时可搞完。然而事实是，整理20个数据点后，弃用此法。
• GetData Graph Digitizer：从图片提取数据点。然而，这…好像并不比手动整理简单多少。
• 爬虫：python3 requests获取某网站折线图上数据，然而，第一步就卡住了。
• 审查（检查）元素：受《python3 requests获取某网站折线图上数据》启发，查看网页Networks状态。误打误撞找到了控制图表的代码……至此，简便方法get，后面就是处理过程中的一些小问题啦。

查看源代码：查看的是别人服务器发送到浏览器的原封不动的代码。

审查元素：看到的是在源代码中找不到的代码，是在浏览器执行js动态生成的。

 

简单记录

1.Google Chrome 打开网页——检查元素——Network XHR

左：Echart交互图表；右：相应代码

查看数据

 

2.经比对，发现代码中显示的WaterLevel数据与原图表不一致。但！差值都是一定的，如，1987年二者差值为1.08。进一步比对，我的猜想正确（赞自己的数据敏感性）。

3.Excel那一套：筛选、分列等。

 

简单总结

• 原来这就是传说中的“前端开发”、“JavaScript”，没有想象的难，interesting
• 注：Echart图表好像只支持Google Chrome，用其他浏览器打开原网页，都无法显示Echart图表。这就是网站开发者的不对了，应当多加几行代码，使Echart图表与其他浏览器也兼容。（我结合网上资料瞎猜的）
• 不到万不得已，绝不做机械的重复性劳动。大多机械劳动都有更好的替代方式，只是，我一时可能想不到，但一定要去想。当然，不是凭空想。这需要平时大量的积累+广涉猎，多交流+多查资料。

 

---

网站二

• 网站：MRC近实时xxx
• 方法：同上，审查（检查）元素+Excel处理
• 注意：Excel处理主要包括筛选+分列

筛选：包含"{d"。分列：以"T"分列，将日期与时间xxx分隔；以,和:同时分列，将后几列分隔，并删除无用列。