前段时间需要做一个中国地图的页面，要求是展示各地产品的销量，我就在网上搜了很多ECharts的资料，学习了一下怎么使用。

本着互相学习，共同进步的原则，特此分享一下自己的学习经验以及使用技巧。如果有用的话可以给老弟点个赞~

首先先展示一下成品：（利用JavaScript在HTML页面绘制），表格利用bootstrap.min.css样式，当然你也可以自己编写样式实现。本文重点介绍如何使用ECharts绘制中国地图并打入地区散点。

话不多说直接上干货！！

echarts.js 官网地址下载：快速上手 - Handbook - Apache ECharts

chain.js 这个官网已经找不到了，需要自行搜寻下载

也可以直接从我的网盘下载：

链接：链接：https://pan.baidu.com/s/18OPEgoRPCVerAkwqTZrExg?pwd=123l  提取码：123l

index.html 启动页面

RobotSales.json 写入我们需要省市的经纬度坐标和说明信息（自定义）

我将地区的数据信息封装到了一个json文件中，我们只需要请求该文件就能获取地区数据，包括：地名、坐标、销量、其他文本等信息；

我们知道json文件的格式是 “key”：value 格式；作为在地图上打点（定位）的依据，这里我们最少要写两点：name和value

n其中ame是地区名字！ value是该地区的经纬度坐标； 其他信息根据自己的需要自行添加就行~。

​

ps:经纬度可以百度

我们已经编写完JSON文件，下边就是我们的index.html内容。代码稍多，没有耐心的老哥可以下滑到最后直接复制粘贴（详情已写入注解）

首先dataValue是我们自己编写的json数据，中国地图可以直接使用，但是如果要展示某一个地区比如荆州，就需要我们查询这个地区的经纬度坐标，然后传给ECharts。

下边我主要介绍一下是如何提取json数据的，以及ECharts使用过程中自己的薄见，若有瑕疵欢迎留言：

因为我们将地区信息封装到json文件了，我们需要请求该文件提取出来信息才能使用！这里我使用的是ajax请求，请求成功后的数据res传入 dealWithData(res)函数中。