jq、js使用echarts.js绘制地图

1,086 阅读1分钟

作为一个技术渣渣,很久不用原生和jq进行开发,都是用框架,所以当使用jq + echarts 蒙圈了,查看了很多博客,终于搞出来了,所以想分享下,但不涉及原理,毕竟我也不是很明白 (所以如果是大神可以路过了,如果和我一样,请往下看)

1.下载echarts,引入html中

2.下载地图数据,在这里给大家提供一个网址,可以根据需求进行全国省市县区的数据下载(这是我所查看的博客提供的)

全国省市县json数据:http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
预览所需地区绘制:http://geojson.io/#map=10/26.6778/106.3360

3.现在就是引入数据,初始化一个echarts

数据如果是js格式,就直接script标签引入;
数据如果是json格式,我们可以使用$.get(URL,function(data){console.log(data)}); 我使用谷歌浏览器,但是访问本地文件涉及到了跨域T-T, 所以报错了,相信有得小伙伴也会遇到,所以解决方式就是 使用jsonp跨域来实现,定义一个回调函数,然后引入,具体看截图:

回调函数的名字一定要相同,json数据也要使用函数名+()包裹起来,像下图这样

最重要的就是引入这个json文件一定要在定义函数之后,否则会报错

echarts的相关页面等配置可以去官网看,这里就不详细介绍了,希望能有所帮助。