徒手绘制中国地图（手绘中国地图视频教程）

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

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

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

Highcharts 是一个用纯 JavaScript 编写的一个图表库，可以用来绘制直线图、曲线图、区域图、柱状图等20多种图表。这里我们用其中的Highmaps来绘制中国地图。（Ps：官方地址：https://www.highcharts.com.cn/ ）效果如下：

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

1.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>

1.2 在body中加入div

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

1.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：官方网站：https://echarts.apache.org/ ）效果如图：

具体实现步骤类似：

2.1 在head中引入js文件。（Ps：其中china.js现在官方不提供下载，提供分享地址：https://download.csdn.net/download/u013019306/70114158 ）

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

2.2 在body中加入div

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

2.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>

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