一分钟教程：绘制中国地图

——程序员今晚不回家（抖音号）

相信很多人可能和我有着一样的感觉，总感觉这两年像是在做梦，终日为生活忙忙碌碌，但却感觉不到充实。想分享点正能量的事情吧，但网上看到的要不是这明星出轨了，要不就是这直播怎么了。哎，想来想去，算了，还是来学习吧。学习使人明智，学习使人快乐！

1、第一种是使用highcharts中的Highmaps绘制地图。

        Highcharts 是一个用纯 JavaScript 编写的一个图表库，可以用来绘制直线图、曲线图、区域图、柱状图等20多种图表。这里我们用其中的Highmaps来绘制中国地图。（Ps：官方地址：兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts ）效果如下：

实现步骤也很简单，具体如下

1. 在head中引入js

   <!-- Highmaps -->
   <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
   <script type="text/javascript" src="js/highmaps.js" ></script>

2. 在body中加入div

   <!-- Highmaps -->
   <div id="container" style="height:450px;"></div>

3. 在script中加入代码

   <!-- Highmaps -->
   <script>
       Highcharts.setOptions({
           lang: { drillUpText: '< 返回 “{series.name}”'}
       });
       var map = null;
       $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
           var data = [{ city: '北京', value: 5000 },
                       { city: '上海', value: 2000 },
                       { city: '广东', value: 2200 },
                       { city: '浙江', value: 1800 },
                       { city: '福建', value: 1000 }];
           map = Highcharts.mapChart('container', {
               title: { text: '中国地图' },
               mapNavigation: {
                   enabled: true,
                   buttonOptions: { verticalAlign: 'bottom' }
               },
               colorAxis: {
                   min: 0,
                   minColor: '#fff',
                   maxColor: '#006cee',
                   labels:{
                       style:{ "color":"red","fontWeight":"bold" }
                   }
               },
               series: [{
                   data: data,
                   mapData: mapdata,
                   joinBy: ['name', 'city'],
                   name: '中国地图'
               }]
           });
       });
   </script>

2、第二种是使用echarts和china.js来会绘制地图

        ECharts，一个使用 JavaScript 实现的开源可视化库，同理也是用来绘制各种图表的。（Ps：官方网站：Apache ECharts ）效果如图：

具体实现步骤类似：

1. 在head中引入js文件。（Ps：其中china.js现在官方不提供下载，提供分享地址：Echarts中国地图(包括china.js文件)-Javascript文档类资源-CSDN下载 ）

   <!-- Echarts -->
   <script type="text/javascript" src="js/echarts.min.js" ></script>
   <script type="text/javascript" src="js/china.js" ></script>

2. 在body中加入div

   <!-- Echarts -->
   <div id="echarts-province"></div>

3. 在script中加入代码

   <script>
       var mydata = [  
           {name: '北京',value: '100' },{name: '天津',value: '100' },  
           {name: '上海',value: '200' },{name: '重庆',value: '300' },  
           {name: '河北',value: '100' },{name: '河南',value: '500' },  
           {name: '云南',value: '100' },{name: '辽宁',value: '200' },  
           {name: '黑龙江',value: '300' },{name: '湖南',value: '400' },  
           {name: '安徽',value: '500' },{name: '山东',value: '600' },  
           {name: '新疆',value: '100' },{name: '江苏',value: '200' },  
           {name: '浙江',value: '300' },{name: '江西',value: '400' },  
           {name: '湖北',value: '500' },{name: '广西',value: '600' },  
           {name: '甘肃',value: '100' },{name: '山西',value: '200' },  
           {name: '内蒙古',value: '300' },{name: '陕西',value: '400' },  
           {name: '吉林',value: '500' },{name: '福建',value: '600' },  
           {name: '贵州',value: '100' },{name: '广东',value: '200' },  
           {name: '青海',value: '300' },{name: '西藏',value: '400' },  
           {name: '四川',value: '500' },{name: '宁夏',value: '600' },  
           {name: '海南',value: '100' },{name: '台湾',value: '200' },  
           {name: '香港',value: '300' },{name: '澳门',value: '400' }  
       ];
       var optionMap = {  
           backgroundColor: '#FFFFFF',  
           title: {  
               text: '全国地图大数据'
           },  
           tooltip : {  
               trigger: 'item'  
           },
           //左侧小导航图标
           visualMap: {  
               show : true,  
               x: 'left',  
               y: 'center',  
               splitList: [   
                   {start: 500, end:600},{start: 400, end: 500},  
                   {start: 300, end: 400},{start: 200, end: 300},  
                   {start: 100, end: 200},{start: 0, end: 100},  
               ],  
               color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
           },
           //配置属性
           series: [{  
               name: '数据',  
               type: 'map',  
               mapType: 'china',   
               roam: true,  
               label: {  
                   normal: {  
                       show: true  //省份名称  
                   },  
                   emphasis: {  
                       show: false  
                   }  
               },  
               data:mydata  //数据
           }]  
       };  
       //初始化echarts实例
       var myChart = echarts.init(document.getElementById('echarts-province'));
       //使用制定的配置项和数据显示图表
       myChart.setOption(optionMap);
   </script>
   

        这两种方法还可以绘制好看的图表，有兴趣的童鞋可以试试。这里只分享简单的教程，希望学习知识也变得简单一些。