@比较详细，比较小白，大神笑看~
@求点赞，求打赏，请支持一个月薪3800的IT从业者☺️

ECharts本地.json文件引用问题

初学echarts.js，因为没有网页基础，遇到很多问题。由于要做一个海口市地图的可视化，但是ecahrts现有的地图里面仅限于省市，没有区县的js文件可以引用，因此我在一个地图选取器的网站上（http://datav.aliyun.com/tools/atlas）选取了需要的区县，下载了json文件到本地。但是在html中引用.json文件的时候，出现了问题，地图一直显示不出来。在ECharts的代码编辑器里面通过上传数据功能，上传了json文件后，可以顺利显示地图，但是自己编辑html并打开网页的时候，地图显示不出来，我”检查“了代码，发现我的map.js脚本里的.json地图数据读取失败，我运用sublimeServer解决了本地.json读取的问题。而后依旧失败，”检查“发现，$(function() {}这里报错了，通过添加引用jquery.js脚本文件解决了所有问题。
按照下面的方式引用.json文件，网页不显示。

<script type="text/javascript" src="/Users/murphy/echarts_project/haikou_full.json"></script>var uploadedDataURL = "/Users/murphy/echarts_project/haikou_full.json "

PS:如何运用地图选取器制作所需要的中国的省市区县json地图数据，请见该文：制作中国省市区县地图json文件（最小至区县）

该文可解决以下问题：

echarts地图.json文件读取、引用失败
网页echarts无法读取本地.json文件
echarts可视化网页中引用地图json文件
SublimeServer的安装、下载、启动、使用
SublimeServer打开本地网页
echarts怎么在本地网页显示

一、chrome浏览器为了安全性考虑，默认对跨域访问禁止

解决办法：

可以使用sublimeServer （Sublime Text）
可以使用火狐浏览器Firefox
开启其他本地的服务器，以http开头访问
通过 Ajax 调用，但前提是得把你的项目启动成一个 Web 服务

sublimeServer

最好的办法就是使用sublimeServer，所以详细讲一下!!

1. 下载

打开Sublime Text的preference，快捷键组合【command+shift+p】，输入Package Control，选择Package Control: Install Package

2）进入Install Package后输入SublimeServer,即可下载SublimeServer

2. 启动

在最上方导航栏找到Tools，在Tools可以看到SublimeServer，然后点击start SublimeServer，则启动服务器

3. 打开文件在浏览器显示

1) 首先需要将代码文件添加到Sublime Text的项目文件夹内

在最上方导航栏找到Project，点击Add Folder to Project，然后选择你的项目文件夹，可以新建一个，然后把代码文件拉进去

如果不操作这一步，将代码文件添加到Sublime Text的项目里，则会报错：File pie.html not in sublilme Project Folder!

2) 代码页面在浏览器打开

在需要浏览器打开的代码页面，点击右键，选择view in sublimeServer，则可正常加载json文件，此时文件名以http://开头，为：http://localhost:8080/echarts_project/haikou_full.json

3）Sublime project内的文件，URL地址皆为http://localhost:8080/开头

切勿忘记在html中把本地的.css文件，.js文件和.json文件在html的脚本<script>引用中修改路径，例如:

<link rel="stylesheet" type="text/css" href="http://localhost:8080/echarts_project/mystyle.css"> <script type="text/javascript" src="http://localhost:8080/echarts_project/haikou_full.json"></script><script type="text/javascript" src="http://localhost:8080/echarts_project/map.js"></script>

二、检查是否有没有遗漏添加jquery.js脚本

简单的图表，只需要配置option，但有些复杂的图表，需要jquery脚本支持，选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

解决办法：

使用echarts服务器的jquery.js文件

<script type="text/javascript" src="http://gallerybox.echartsjs.com/dep/jquery/jquery.js"></script>

下载jquery.js文件至本地

<script type="text/javascript" src="http://localhost:8080/echarts_project/jquery.js"></script>

除此之外，如果还有问题，可检查是否遗漏引用ecahrts.js等echarts所需的.js文件

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

最后给大家贴一张我最后完成的海口市滴滴交通流量分析的动态交互地图效果图。

如有疑问，可以联系我咨询哟~