零基础echarts热力图学习笔记
写在前面
本人并非专业,没有javascript语言基础,拿echarts当黑箱子用,所以这里只是记录一下学习历程,重点放在了实用的地图热力图,将一些自己遇到的问题总结一下,仅供新人参考入门,当然也欢迎各位指出错误、共同学习,也算是数模美赛的后续工作,为比赛画上一个句号。
入门准备
首先,众所周知,echarts官网里的实例只是代码的一部分,如果想实现自定义地图,需要下载官网的文件自己编码。类似的小白教程在网上很容易搜到(不过其实一共也就那几篇),在这里我推荐一下使用js文件的一个例子(关于js和json文件之后会讲到):
https://www.jianshu.com/p/002125dd1f6e
这位博主写的已经很明白了,提醒各位注意文件路径,如果要复制粘贴代码直接用的话注意路径和博主的保持一致。跟着教程下载echarts的脚本文件,新建html文件就没什么问题。这里我使用的编辑器是notepad++。
不过我在试验的过程中,浏览器总是会报错:
(读者要是试了试发现没这个报错当我没说)
由于时间紧迫,我不可能从头学起,搜了搜报错原因,发现好像是浏览器少了个协定(我用的chrome),最快的办法是换浏览器。我又尝试了火狐,IE,都失败了。最后试了试edge居然成了。(我只需要最后的图片,所以这里就不深究了。真正搞前端开发可不能止步于此。同时也欢迎大佬指点这类问题如何解决)
json文件与js文件
上文中我推荐的那位博主为了方便新手入门,使用的是js文件。但事实上我觉得json文件的使用更加广泛。这两种文件具体定义之类的我在这里不献丑解释了,各位有兴趣了解的话自行百度。我只说一下使用上的区别。
本质上来讲,这两种文件最后呈现效果是一样的。但是你改写成txt文件打开就会发现,二者格式根本上有区别。下面是美国的js文件和json文件的对比:
USA js文件:
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({
}, root.echarts);