最近要做一個上海的遷徙圖，搜到的都是 echarts 和mapv一樣，有自己的API說明和demo 形式上非常相近，而且看起來功能比mapv更加完善。
另外是滴滴的一個蝌蚪遷徙圖，看起來是真實軌跡的模擬，暫時沒有找到能夠支持的工具，暫時放一放。
遷徙圖，目的就是為了描繪地圖上一次從出發(fā)地到結束地點的過程，目前echarts遷徙圖，我能看懂的，不包括真實過程模擬，也就是說一次真實遷徙中間有多個地點，路線是曲折的，但是echarts目前支持的是兩點之間畫一條曲線。
遷徙圖所需要的輸入就是，所有遷徙對應的（出發(fā)地，目的地，人數(shù)）
當然還需要，所有涉及到的位置的準確地理經(jīng)緯度（百度地圖經(jīng)緯度，其他地圖的經(jīng)緯度需要轉換成百度地圖經(jīng)緯度）
大的過程如下：
- 下載echarts-2.2.7壓縮包
http://echarts.baidu.com/echarts2/doc/changelog-en.html# 右上角有個download 點擊下載即可
注意 echarts的版本很多，我沒有一一用過，這是我當時下載的一個，不知道是不是比較好的一版，但是至少可以畫遷徙圖，大家自己根據(jù)需求再研究吧。
2.解壓縮后，到echarts-2.2.7\extension\BMap\doc目錄下
我因為要畫上海市內(nèi)部的遷徙圖，所以需要用到百度地圖支持
demo上都是都省市以上的級別的遷徙圖，放心吧，雖然不太一樣，demo用的已經(jīng)做好的地圖json文件，但是百度地圖支持任意級別的顯示，所以說學會了上海市以下級別的遷徙圖，任何級別的遷徙圖都能畫
3.doc下面有一個bmap和一個example
可以打開html看一下效果。bmap就和網(wǎng)站上的demo一毛一樣。example的則是單純的一個遷徙圖。我簡單說明下如何用，畢竟有些同學只需要稍微改下example就足以滿足需求了。
請看example.html的源碼 自學成菜的我告訴你們?nèi)绾巫ブ攸c 請直接看代碼的注釋內(nèi)容即可
<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的相對路徑 自己根據(jù)需求改一下即可
<script src="../../../doc/example/www/js/echarts.js"></script>
//ak替換成你申請的百度地圖開發(fā)者key，不改好像原始的也能用，不過最好用自己的
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>
//js的相對路徑 自己根據(jù)需求改一下即可
<script src="../../../doc/asset/js/jquery.min.js"></script>
//這是實質的程序文件路徑
<script src="./example.js"></script>
</body>
</html>
真正處理輸入數(shù)據(jù)的是example.js文件，html只是負責顯示
js文件代碼說明，我只說明比較重要的部分，其他不修改，也可以運行，當然大家也可以按照具體需求去修改，但是以下注釋的各部分是比較重要的
var startPoint = {//地圖中心點 經(jīng)緯度，即打開example.html時，網(wǎng)頁中心的地理經(jīng)緯度
x: 104.114129,
y: 37.550339
};
map.centerAndZoom(point, 5);//地圖級別，級別越大，地圖顯示范圍越小
map.enableScrollWheelZoom(true);//是否允許鼠標滾輪放大縮小
// 地圖自定義樣式
map.setMapStyle({//地圖樣式，如何修改這里請查看我的文章 [百度地圖 js/web 開發(fā) 怎么確定一些參數(shù)]
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是可以根據(jù)右下角的按鈕來切換不同的遷徙圖的，每一次顯示的遷徙圖，用一個數(shù)據(jù)結構來表示，其名稱為name
type:'map',
mapType: 'none',
data:[],
geoCoord: {
//這是最重要部分之一，地圖中所有遷徙起始地點的經(jīng)緯度和名稱文本，都要寫在這里
//源代碼是全國級別，我顯示的上海市內(nèi)部數(shù)據(jù)，所以全部替換為上海市具體地理位置的經(jīng)緯度了
'文本': [經(jīng)緯度],
},
markLine : {//遷徙線條的顯示效果
// 參考http://echarts.baidu.com/echarts2/doc/doc.html#SeriesMarkLine
...
}
},
//這是最重要部分了，地圖或者說‘北京’按鈕對應的一組遷徙線條中，所有遷徙線條的起始地，以及對應人數(shù)，全部在此
//第一個name是出發(fā)地的名稱文本，不一定非要都寫 北京
//只要上面geoCoord中記錄到的地理位置都可以引用其名稱
//第二個自然是目的地，value是人數(shù)級別，和datarange相互配合，可以畫出不同顏色的線
data : [
[{name:'北京'}, {name:'上海',value:95}],
...
]
},
markPoint : {//這里可以在地圖上用圓圈顯示某一個地點，選項參考echarts doc即可
...
}
},
data : [//這里是要顯示地點的名稱文本，以及對應數(shù)量級別
{name:'上海',value:95},
...
]
}
}
]
};
以上就是所有重要部分了
我這里展示一下我做的一組遷徙圖效果，是根據(jù)一部分上海市地鐵數(shù)據(jù)做出來的
有點累了，改天再繼續(xù)寫
