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扩展百度地图了，但是这些操作还是需要一个前提。你的项目必须可以接入外网，不然怎么接入百度地图啊。以上为个人的一些操作过程，达成了初步的目标，将百度地图接入，后续会继续为大家带来具体的详细的关于画点，画线，以及函数动画的操作，敬请期待？