1，在通過Echarts做地圖操作的時候有三種方式：1種是利用Echarts官網的地圖文件（js，json）地圖導入到頁面中進行展示，這些例子官網很多。還有就是SVG圖片結合Echarts，這種操作在Echarts3.0之後我不是很清楚，所以在Echarts的2.2.7版本時可以這麼做：在js中創建Echarts的基本環節，然後通過ajax讀取svg然後再回調裏面進行操作。
第三種就是：利用百度地圖進行擴展
2，首先你需要在百度地圖上申請一個類似開發賬號的東西，將來在jsp中接入百度地圖需要這個ak，還有就是Echarts操作的一些基本文件主要是兩個一個是map.js一個是BMap下面的main.js這兩個文件都可以在下載的Echarts的壓縮包中找到，下載地址：http://echarts.baidu.com/build/echarts-2.2.7.zip
3，開始正式的操作：
在jsp中引入jQuery，引入echarts的js，接入百度地圖：
<script type="text/javascript" src="${pageContext.request.contextPath}/js/commons/jquery-1.8.0.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echart/echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=********"></script>//ak後面的就是你在百度地圖申請的接入key
然後就是創建你的div，用於展示你的地圖啦，
剩下的操作就是比較複雜的地圖的操作了，都是js代碼所以需要寫在外部js裏面即可，然後將外部js引入
外部js：
(function () {
require.config({
paths: {
echarts: 'js/echart' //項目中前面所提到的map.js的文件路徑
},
packages: [
{
name: 'BMap', //固定寫法需要引入BMap
location: 'Bmap', //項目中全面所提到的Bmap下的main.js的文件路徑
main: 'main '
}
]
});
require(
[
'echarts',
'BMap',
'echarts/chart/map'
],
function (echarts, BMapExtension) {
$('#main').css({
height:500,
width: 1200
});
// 初始化地圖
var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
enableMapClick: false
});
var map = BMapExt.getMap();
var container = BMapExt.getEchartsContainer();
var startPoint = {
x: 124.114129,
y: 47.550339
};
var point = new BMap.Point(startPoint.x, startPoint.y);
map.centerAndZoom(point, 5);
map.enableScrollWheelZoom(true);
option ={
//這裏進行地圖的具體詳細設置，主要series裏面type的類型爲map而mapType的類型爲none： type:'map',
mapType: 'none',
}
var myChart = BMapExt.initECharts(container);
window.onresize = myChart.onresize;
BMapExt.setOption(option);
}
}
這樣就可以爲Echarts擴展百度地圖了，但是這些操作還是需要一個前提。你的項目必須可以接入外網，不然怎麼接入百度地圖啊。以上爲個人的一些操作過程，達成了初步的目標，將百度地圖接入，後續會繼續爲大家帶來具體的詳細的關於畫點，畫線，以及函數動畫的操作，敬請期待？