零基础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);