一、第 1 坑
1.报错情况
最近,老Amy 想搭建一个动态加载数据的可视化大屏,之前所掌握的 pyecharts
不够用了。于是就咔咔咔的看 echarts
官网;
在练习读取本地 json
文件时,我的代码与官方文档并无差别,如下:
但打开控制台,突如其来的报错一下子就给我整不会了,报错如下:
2.思考
如果代码一致,但运行出问题,就可能是我引入的 js
文件版本与官网的不同,导致相同语法但效果不同。我的版本如下:
echarts.min.js
jquery-3.6.0.min.js
然而,我也找不到出处,于是乎上网一阵检索。发现该错误是Jquery 的 load 加载本地文件出现跨域错误。
3.解决
- 打开
Chrome.exe
所在文件夹 - 鼠标放在
Chrome.exe
上,点击鼠标右键,选择创建快捷方式 - 鼠标放在
Chrome.exe
快捷方式上,点击鼠标右键,点击属性 - 在
目标
这栏后面添加代码:--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security
,点击确定。
- 然后打开
Chrome.exe
快捷方式,并将.html
文件拖拽进去,就会发现报错都消失啦~
二、第 2 坑
1.原因
不报错之后,我就兴奋的打印了一下数据。按道理来说,打印的数据应该是一个对象,然而,却直接输出字符串。黑人问号都出来了???
2.解决
这次倒不慌,只要添加一行代码,将字符串转为对象即可。
$.get('test_data.json').done(function(ret){
ret = JSON.parse(ret);
console.log(ret)
})
奥耶耶!就这样我的图形也展示出来啦~