Echarts 读取本地 json 文件所遇到的坑

一、第 1 坑

1.报错情况

最近，老Amy 想搭建一个动态加载数据的可视化大屏，之前所掌握的 pyecharts 不够用了。于是就咔咔咔的看 echarts 官网；

在练习读取本地 json 文件时，我的代码与官方文档并无差别，如下：

但打开控制台，突如其来的报错一下子就给我整不会了，报错如下：

2.思考

如果代码一致，但运行出问题，就可能是我引入的 js 文件版本与官网的不同，导致相同语法但效果不同。我的版本如下：

• echarts.min.js
• jquery-3.6.0.min.js

然而，我也找不到出处，于是乎上网一阵检索。发现该错误是Jquery 的 load 加载本地文件出现跨域错误。

3.解决

1. 打开 Chrome.exe 所在文件夹
2. 鼠标放在 Chrome.exe 上，点击鼠标右键，选择创建快捷方式
3. 鼠标放在 Chrome.exe 快捷方式上，点击鼠标右键，点击属性
4. 在 目标 这栏后面添加代码：--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security，点击确定。

5. 然后打开 Chrome.exe 快捷方式，并将 .html 文件拖拽进去，就会发现报错都消失啦~

二、第 2 坑

1.原因

不报错之后，我就兴奋的打印了一下数据。按道理来说，打印的数据应该是一个对象，然而，却直接输出字符串。黑人问号都出来了？？？

2.解决

这次倒不慌，只要添加一行代码，将字符串转为对象即可。

$.get('test_data.json').done(function(ret){
            ret = JSON.parse(ret);
            console.log(ret)
})

奥耶耶！就这样我的图形也展示出来啦~