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 这个属性是让地图放大的关键，看一下效果对比图
放大前：

放大地图后：

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

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