echarts.js原先可以不使用百度地圖API亚隅，直接實現(xiàn)遷徙圖的效果亮曹。后來因為一些原因氛什，地理信息的定位需要借助百度地圖來實現(xiàn)猿推。
首先需要echarts片习。
然后是echarts的插件 bmap。
之后是需要在頁面上結合百度地圖蹬叭，所以要申請一個百度地圖的api key地圖Api申請地址
這里申請一個JS API在網(wǎng)頁端 使用就可以了
準備就緒藕咏，就可以開始制作了。
百度echarts本身的簡單使用教程
echarts最簡單教程
這是echarts給出的快速上手教程秽五，關于配置文件中的每個模塊的作用在后面簡單介紹孽查。文檔中也有更詳細的介紹和使用方法。-
搭一個簡易的測試頁面
- 文件結構
demo/ demo.html map.js js/ echarts.js bmap.js- demo.html筝蚕，畫一個最簡單的div窗口來容納遷徙圖卦碾。
<html> <head> <meta charset="utf-8"> <style> .mainwindow{ height: 500px; width: 500px; } .mapwindow{ height: 100%; width: 500px; background-color: #3dd17b; float: left; } </style> </head> <body> <div id="main" class="mainwindow"> <div id="map" class="mapwindow"></div> </div> </body> <script src="http://api.map.baidu.com/api?v=2.0&ak=你申請的API KEY"></script> <script src="../js/echarts.js"></script> <script src="../js/bmap.js"></script> <script src="./map.js"></script> </html>- map.js 用來完成寫入echarts中的圖形配置文件和圖形的初始化和加載
//初始化echarts,并和框體map綁定。 var myChart = echarts.init(document.getElementById('map')); //手工寫入的一個遷徙線的數(shù)據(jù)起宽，正常項目中應該是由AJAX或其他方式來獲取數(shù)據(jù)洲胖。 var linesdata = [{ fromName: "銀泰", toName: "路口", coords: [ [120.114271,30.305938], [120.118951,30.309134] ] }]; //echarts中使用地圖的配置參數(shù) var option = { bmap: { // 百度地圖中心經(jīng)緯度 坐標拾取器http://api.map.baidu.com/lbsapi/getpoint/index.html center: [120.114271,30.305938], // 百度地圖縮放等級，數(shù)字越大坯沪，放大越大绿映，地圖比例尺越小 zoom: 16, // 是否開啟拖拽縮放，可以只設置 'scale' 或者 'move' roam: false, // mapStyle是百度地圖的自定義樣式，見 http://developer.baidu.com/map/custom/ mapStyle: { styleJson: [{ "featureType": "water", "elementType": "all", "stylers": { "color": "#021019" } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "highway", "elementType": "geometry.stroke", "stylers": { "color": "#147a92" } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "arterial", "elementType": "geometry.stroke", "stylers": { "color": "#0b3d51" } }, { "featureType": "local", "elementType": "geometry", "stylers": { "color": "#000000" } }, { "featureType": "land", "elementType": "all", "stylers": { "color": "#08304b" } }, { "featureType": "railway", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "railway", "elementType": "geometry.stroke", "stylers": { "color": "#08304b" } }, { "featureType": "subway", "elementType": "geometry", "stylers": { "lightness": -70 } }, { "featureType": "building", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": { "color": "#857f7f" } }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": { "color": "#000000" } }, { "featureType": "building", "elementType": "geometry", "stylers": { "color": "#022338" } }, { "featureType": "green", "elementType": "geometry", "stylers": { "color": "#062032" } }, { "featureType": "boundary", "elementType": "all", "stylers": { "color": "#1e1c1c" } }, { "featureType": "manmade", "elementType": "geometry", "stylers": { "color": "#022338" } }, { "featureType": "poi", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "all", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": { "color": "#2da0c6", "visibility": "on" } } ] } }, //series是在地圖上的線條等效果的配置文件叉弦，具體可以查閱文檔丐一。 series: [{ type: 'lines', coordinateSystem: 'bmap', zlevel: 2, effect: { show: true, period: 6, trailLength: 0, symbol: 'arrow', symbolSize: 10 }, lineStyle: { normal: { color: "#a6c84c", width: 2, opacity: 0.6, curveness: 0.2 } }, //將手動做的一個遷徙數(shù)據(jù)放入線條的數(shù)據(jù)部分。 data: linesdata }] }; //配置參數(shù)傳入圖形實例中 myChart.setOption(option); //初始化bmap和echarts實例綁定 var bmap = myChart.getModel().getComponent('bmap').getBMap(); bmap.addControl(new BMap.MapTypeControl());
在瀏覽器中打開demo.html就可以看到一個杭州市城西銀泰到一個小路口的箭頭指向的線段淹冰。簡易的遷徙圖就制作完成了库车。
