最近要做一个上海的迁徙图，搜到的都是 echarts 和mapv一样，有自己的API说明和demo 形式上非常相近，而且看起来功能比mapv更加完善。
另外是滴滴的一个蝌蚪迁徙图，看起来是真实轨迹的模拟，暂时没有找到能够支持的工具，暂时放一放。
迁徙图，目的就是为了描绘地图上一次从出发地到结束地点的过程，目前echarts迁徙图，我能看懂的，不包括真实过程模拟，也就是说一次真实迁徙中间有多个地点，路线是曲折的，但是echarts目前支持的是两点之间画一条曲线。
迁徙图所需要的输入就是，所有迁徙对应的（出发地，目的地，人数）
当然还需要，所有涉及到的位置的准确地理经纬度（百度地图经纬度，其他地图的经纬度需要转换成百度地图经纬度）
大的过程如下：
- 下载echarts-2.2.7压缩包
http://echarts.baidu.com/echarts2/doc/changelog-en.html# 右上角有个download 点击下载即可
注意 echarts的版本很多，我没有一一用过，这是我当时下载的一个，不知道是不是比较好的一版，但是至少可以画迁徙图，大家自己根据需求再研究吧。
2.解压缩后，到echarts-2.2.7\extension\BMap\doc目录下
我因为要画上海市内部的迁徙图，所以需要用到百度地图支持
demo上都是都省市以上的级别的迁徙图，放心吧，虽然不太一样，demo用的已经做好的地图json文件，但是百度地图支持任意级别的显示，所以说学会了上海市以下级别的迁徙图，任何级别的迁徙图都能画
3.doc下面有一个bmap和一个example
可以打开html看一下效果。bmap就和网站上的demo一毛一样。example的则是单纯的一个迁徙图。我简单说明下如何用，毕竟有些同学只需要稍微改下example就足以满足需求了。
请看example.html的源码 自学成菜的我告诉你们如何抓重点 请直接看代码的注释内容即可
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div>
//下面是echart.js的相对路径 自己根据需求改一下即可
<script src="../../../doc/example/www/js/echarts.js"></script>
//ak替换成你申请的百度地图开发者key，不改好像原始的也能用，不过最好用自己的
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>
//js的相对路径 自己根据需求改一下即可
<script src="../../../doc/asset/js/jquery.min.js"></script>
//这是实质的程序文件路径
<script src="./example.js"></script>
</body>
</html>
真正处理输入数据的是example.js文件，html只是负责显示
js文件代码说明，我只说明比较重要的部分，其他不修改，也可以运行，当然大家也可以按照具体需求去修改，但是以下注释的各部分是比较重要的
var startPoint = {//地图中心点 经纬度，即打开example.html时，网页中心的地理经纬度
x: 104.114129,
y: 37.550339
};
map.centerAndZoom(point, 5);//地图级别，级别越大，地图显示范围越小
map.enableScrollWheelZoom(true);//是否允许鼠标滚轮放大缩小
// 地图自定义样式
map.setMapStyle({//地图样式，如何修改这里请查看我的文章 [百度地图 js/web 开发 怎么确定一些参数]
styleJson: [
{
...
});
option = {//图整体设置比如标题
...
},
tooltip : { // http://echarts.baidu.com/echarts2/doc/doc.html#Tooltip
...
},
legend: {//图例 http://echarts.baidu.com/echarts2/doc/doc.html#Toolbox
...
},
toolbox: {//右侧工具箱，http://echarts.baidu.com/echarts2/doc/doc.html#Toolbox
...
},
dataRange: {//右侧热力图显示选项，参考http://echarts.baidu.com/echarts2/doc/doc.html#DataRange
...
},
series : [
{
name:'北京',、//因为example是可以根据右下角的按钮来切换不同的迁徙图的，每一次显示的迁徙图，用一个数据结构来表示，其名称为name
type:'map',
mapType: 'none',
data:[],
geoCoord: {
//这是最重要部分之一，地图中所有迁徙起始地点的经纬度和名称文本，都要写在这里
//源代码是全国级别，我显示的上海市内部数据，所以全部替换为上海市具体地理位置的经纬度了
'文本': [经纬度],
},
markLine : {//迁徙线条的显示效果
// 参考http://echarts.baidu.com/echarts2/doc/doc.html#SeriesMarkLine
...
}
},
//这是最重要部分了，地图或者说‘北京’按钮对应的一组迁徙线条中，所有迁徙线条的起始地，以及对应人数，全部在此
//第一个name是出发地的名称文本，不一定非要都写 北京
//只要上面geoCoord中记录到的地理位置都可以引用其名称
//第二个自然是目的地，value是人数级别，和datarange相互配合，可以画出不同颜色的线
data : [
[{name:'北京'}, {name:'上海',value:95}],
...
]
},
markPoint : {//这里可以在地图上用圆圈显示某一个地点，选项参考echarts doc即可
...
}
},
data : [//这里是要显示地点的名称文本，以及对应数量级别
{name:'上海',value:95},
...
]
}
}
]
};
以上就是所有重要部分了
我这里展示一下我做的一组迁徙图效果，是根据一部分上海市地铁数据做出来的
有点累了，改天再继续写
