之前写过单独的省市地图，好多朋友都问各省市的地图怎么写，今天我就简单的写了个demo。仅供大家参考。不足之处望大家多多指正。
首先我们还是先看下效果图
鼠标滑过各个省市的效果如下：
其实写法和之前我写过的省市地图基本一致，将china.json文件改成china.js文件，然后引入到页面中。
<div id="main" style="" class="china"></div><script type="text/JavaScript" src="js/echarts.min.js"></script><script type="text/JavaScript" src="js/china.js"></script><script type="text/javascript">echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({title:{text: '中国轮廓地图',top: '3%',left: 'center',textStyle: {fontSize: 20,fontWeight: 600,color: '#fff'}},tooltip: {// 触发类型, 数据项图形触发trigger: 'item', backgroundColor:'#fff',textStyle:{color:'#000',},formatter: function (val) {return val.data.name + '<div class="bjMap">'+ '<h2><img src="' + val.data.url + '"></h2>'+ '<p>' + val.data.value + '</p>'+ '</div>'}},series: [{type: 'map',map: 'china',roam: true,//是否开启鼠标缩放和平移漫游geoIndex: 0,// 不可缺少，否则无tooltip 指示效果label: {normal: {show: true,//显示省份标签textStyle:{color:"#fff"}//省份标签字体颜色},emphasis: {//对应的鼠标悬浮效果show: true,textStyle:{color:"#fff"}}},itemStyle: {normal: {borderWidth: 1.95,//区域边框宽度borderColor: '#0550c3',//区域边框颜色areaColor:"#000",//区域颜色},emphasis: {borderWidth: 1.95,//鼠标滑过区域，区域边框宽度borderColor: '#fff',//鼠标滑过区域，区域边框颜色areaColor:"#ff6511",//鼠标滑过区域背景色}},data: [{name: '北京', url:'/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg', value: '中国帝都', },{name: '上海', url:'/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '天津', url:'/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '重庆', url:'/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '河北', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '山东', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '陕西', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '山西', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '辽宁', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '吉林', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '黑龙江', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '宁夏', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '江苏', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '河南', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '安徽', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '浙江', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '湖南', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '湖北', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '甘肃', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '青海', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '西藏', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '新疆', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '内蒙古', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '贵州', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '四川', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '江西', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '福建', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '广东', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '广西', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '云南', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '海南', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '香港', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '澳门', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', },{name: '台湾', url:'/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', }]}],});</script>
以上代码就是全国地图的代码了，大家可以去实践下。样式可以根据自己的需求来写，这里我就不贴了。
如果大家需要源码的可以在这下载源码
