echart 插件实现全国地图

　　最近的项目要用到一个能展现全国地图的功能，并且全国各个省份显示的颜色不同，点击省份后会返回省份名称。经过反复的查找最终确定了echart这个插件，最后的成果还不错，在这里写下来希望对大家有所帮助。话不多说先看最终的效果图。

　　最终的效果就是这个样子的啦，感觉还是很好看的，echart这个插件使用还是很简单的，按照官网步骤来就好了。官网地址：http://echarts.baidu.com/index.html

　　下面就是我实现这个效果的代码了：

 <!DOCTYPE html>
 <html style="height: 100%">
 
     <head>
         <meta charset="utf-8">
     </head>
 
     <body style="height: 100%; margin: 0">
         <div id="container" style="height: 100%"></div>
         <script type="text/javascript" src="js/echarts.min.js"></script>
 
         <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
 
         <script type="text/javascript">
             var myChart = echarts.init(document.getElementById("container"));
 
             option = {
 
                 tooltip: {
                     trigger: 'item',
                     formatter: '{b}'
                 },
 
                 series: [{
                     name: '中国',
                     type: 'map',
                     mapType: 'china',
                     selectedMode: 'single',
                     roam: false,
                     label: {
                         normal: {
                             show: true
                         },
                         emphasis: {
                             show: true
                         }
                     },
                     data: [{
                             name: '北京',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D9EDE1'
                                 }
                             }
                         },
                         {
                             name: '天津',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D9EDE1'
                                 }
                             }
                         },
                         {
                             name: '上海',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '重庆',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
                             name: '河北',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FFFDE4'
                                 }
                             }
                         },
                         {
                             name: '河南',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
 
                             name: '云南',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
                             name: '辽宁',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '黑龙江',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '湖南',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D7EDFB'
                                 }
                             }
                         },
                         {
                             name: '安徽',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '山东',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D9EDE1'
                                 }
                             }
                         },
                         {
                             name: '新疆',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D7EDFB'
                                 }
                             }
                         },
                         {
                             name: '江苏',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D7EDFB'
                                 }
                             }
                         },
                         {
                             name: '浙江',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D9EDE1'
                                 }
                             }
                         },
                         {
                             name: '江西',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
                             name: '湖北',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FFFDE4'
                                 }
                             },
                             selected: true
                         },
                         {
                             name: '广西',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D9EDE1'
                                 }
                             }
                         },
                         {
                             name: '甘肃',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FFFDE4'
                                 }
                             }
                         },
                         {
                             name: '山西',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D9EDE1'
                                 }
                             }
                         },
                         {
                             name: '内蒙古',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D7EDFB'
                                 }
                             }
                         },
                         {
                             name: '陕西',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '吉林',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FFFDE4'
                                 }
                             }
                         },
                         {
                             name: '福建',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D7EDFB'
                                 }
                             }
                         },
                         {
                             name: '贵州',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FFFDE4'
                                 }
                             }
                         },
                         {
                             name: '广东',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '青海',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
                             name: '西藏',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FFFDE4'
                                 }
                             }
                         },
                         {
                             name: '四川',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#D9EDE1'
                                 }
                             }
                         },
                         {
                             name: '宁夏',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
                             name: '海南',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
                             name: '台湾',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FBE0EC'
                                 }
                             }
                         },
                         {
                             name: '香港',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '澳门',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         },
                         {
                             name: '南海诸岛',
                             itemStyle: {
                                 normal: {
                                     areaColor: '#FCE1D8'
                                 }
                             }
                         }
                     ]
                 }]
             };
 
             myChart.setOption(option, true);
         </script>
     </body>
 
 </html>

　　这部分代码只引用了一个js文件，这个官网就可以下载的到，最后还有两个细节的部分提醒大家：

　　1.点击省份返回省份信息

 myChart.on('click', function(params) {
             console.log(params.name);
 });

　　只要有这部分代码就可以实现点击省份返回省份名称的功能啦！

　　2.关于地图的大小问题　　

　　尽管地图的大小和echart的容器大小挂钩，但是地图在容器内并不是全部占满的，这样就会影响一部分的美观，解决这个问题。只要添加一个属性就可以了。

     series: [{
                     name: '中国',
                     type: 'map',
                     mapType: 'china',
                     selectedMode: 'single',
                     roam: false,
                 zoom: 1.2,
                     label: {
                         normal: {
                             show: true
                         },
                         emphasis: {
                             show: true
                         }
                     }，
             ...}]

　　注意 zoom: 1.2 这个属性是让地图放大的关键，看一下效果对比图
放大前：

放大地图后：

在容器大小一致的情况下，地图明显变大了。

好了，这就是我在项目中遇到的一个小小的问题，已经解决了，也希望对大家有所帮助，大家如果有更好的实现方式也欢迎在评论中提出。