注：echarts结合china.js使用效果并不好，china.js是矢量图，显示的地图只有一个轮廓，所以正常会选择百度地图或者其他地图配合使用。
一.代码如下（参考网上，并加入自己的整理）
function initHotMap(dataArr, domId, title){ $.get("${ctxStatic}/resources/js/bmap/dataTool.js",function(){ $.get(‘${ctxStatic}/resources/js/bmap/bmap.min.js‘, function () { setTimeout(function(){}, 3000); var hotMap = echarts.init(document.getElementById(domId)); // 最终需整理成的数据格式 ：[{name:‘nanjing‘,value : [118.77801148172465,32.03102850827321,80]}] var option = { title: { text: title, left: ‘center‘ }, tooltip : { trigger: ‘item‘, formatter:function(v){ return ‘‘; } }, bmap: { // 中心为南京 center: [118.725551,32.024621], zoom: 16, roam: true, mapStyle: { styleJson: [{ ‘featureType‘: ‘water‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘color‘: ‘#d1d1d1‘ } }, { ‘featureType‘: ‘land‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘color‘: ‘#f3f3f3‘ } }, { ‘featureType‘: ‘railway‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘visibility‘: ‘off‘ } }, { ‘featureType‘: ‘highway‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘color‘: ‘#fdfdfd‘ } }, { ‘featureType‘: ‘highway‘, ‘elementType‘: ‘labels‘, ‘stylers‘: { ‘visibility‘: ‘all‘ } }, { ‘featureType‘: ‘arterial‘, ‘elementType‘: ‘geometry‘, ‘stylers‘: { ‘color‘: ‘#fefefe‘ } }, { ‘featureType‘: ‘arterial‘, ‘elementType‘: ‘geometry.fill‘, ‘stylers‘: { ‘color‘: ‘#fefefe‘ } }, { ‘featureType‘: ‘poi‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘visibility‘: ‘off‘ } }, { ‘featureType‘: ‘green‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘visibility‘: ‘all‘ } }, { ‘featureType‘: ‘subway‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘visibility‘: ‘off‘ } }, { ‘featureType‘: ‘manmade‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘color‘: ‘#d1d1d1‘ } }, { ‘featureType‘: ‘local‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘color‘: ‘#d1d1d1‘ } }, { ‘featureType‘: ‘arterial‘, ‘elementType‘: ‘labels‘, ‘stylers‘: { ‘visibility‘: ‘all‘ } }, { ‘featureType‘: ‘boundary‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘color‘: ‘#fefefe‘ } }, { ‘featureType‘: ‘building‘, ‘elementType‘: ‘all‘, ‘stylers‘: { ‘color‘: ‘#d1d1d1‘ } }, { ‘featureType‘: ‘label‘, ‘elementType‘: ‘labels.text.fill‘, ‘stylers‘: { ‘color‘: ‘purple‘ } }] } }, series : [ { type: ‘scatter‘, coordinateSystem: ‘bmap‘, data: dataArr, symbolSize: function (val) { return val[2] ; }, label: { normal: { formatter: ‘{b}‘, position: ‘right‘, show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: ‘purple‘ } } }, { type: ‘effectScatter‘, coordinateSystem: ‘bmap‘, data: dataArr.sort(function(a, b){ return b.value[20] - a.value[20]; }).slice(0,5), symbolSize: function (val) { return val[2] ; }, showEffectOn: ‘render‘, rippleEffect: { brushType: ‘stroke‘ }, hoverAnimation: true, label: { normal: { formatter: ‘{b}‘, position: ‘right‘, show: true } }, itemStyle: { normal: { color: ‘purple‘, shadowBlur: 10, shadowColor: ‘#333‘ } }, zlevel: 1 } ] }; hotMap.setOption(option); // 添加百度地图插件 var bmap = hotMap.getModel().getComponent(‘bmap‘).getBMap(); bmap.addControl(new BMap.MapTypeControl()); bmap.addControl(new BMap.NavigationControl()); bmap.disableScrollWheelZoom(); }); }); }
二。常见问题整理
1.地图显示不出来，或者只显示南沙群岛，而且浏览器控制台报错关于bmap.js加载等问题，是因为页面bmap.js引入方式错误的原因
解决方案：（1）首先要在页面首部引入百度地图 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script> 其中ak的值需要自行到百度地图官网申请。
（2）通过 $.get(‘${ctxStatic}/resources/js/bmap/bmap.min.js‘, function () { ///处理逻辑 });这种方式引入bmap.min.js文件，即使使用china.js的时候也需要这种方式，否则会因为加载不全就执行产生报错。
（3）如果想在echarts中操作百度地图，比如加上百度地图的相关控件，可以通过 var bmap = hotMap.getModel().getComponent(‘bmap‘).getBMap(); 这种方式获取地图对象，然后就可以随心所欲的操作了，百度地图相关操作方法可以百度地图API。
