Echarts获取示例json资源

淡淡的烟草味﹌ 2024-03-22 10:10 13阅读 0赞

## Echarts获取示例json资源 ##

Echarts官网上提供了很多图表例子供我们白嫖，有时候遇到数据量比较大时，它会向后台请求json文件来加载图表数据，但示例中并没有直接给我们提供json文件，这导致我们在使用过程会遇到很多麻烦，本文提供一个小技巧获取示例中的json文件，亲测Edge、Chrome均可

### 一、打开示例页面 ###

如：[https://echarts.apache.org/examples/zh/editor.html?c=graph-label-overlap&lang=ts][https_echarts.apache.org_examples_zh_editor.html_c_graph-label-overlap_lang_ts]  
![在这里插入图片描述][f1b9efae8ba44a1dbe7e7ee286cad825.png]  
在该实例中我们要获取的是图中的“**/data/asset/data/les-miserables.json**”文件

### 二、打开开发者模式 ###

**F12**：打开开发者模式  
找到**Network**：  
![在这里插入图片描述][cdb3a907f2fb448c8c18708de1ce5028.png]  
**Ctrl+R**重新刷新页面获取网络资源，滑到最下面，找到“**les-miserables.json**”:  
![在这里插入图片描述][d6981976b8f041b3b07b4546b7f2ff1b.png]  
右键在新页面打开，再右键另存为json文件即可：  
![在这里插入图片描述][17f9a49d86274add8d187ea08d7d5481.png]

[https_echarts.apache.org_examples_zh_editor.html_c_graph-label-overlap_lang_ts]: https://echarts.apache.org/examples/zh/editor.html?c=graph-label-overlap&lang=ts
[f1b9efae8ba44a1dbe7e7ee286cad825.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e91cec2205124d1e81abe0dccf8aef29.png
[cdb3a907f2fb448c8c18708de1ce5028.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c80e181c61644162b7a730879c64620b.png
[d6981976b8f041b3b07b4546b7f2ff1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/904b899648c84e8fa003fac9fcbf01b9.png
[17f9a49d86274add8d187ea08d7d5481.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/09fad0b7ef48431491d31057fd75bc37.png