——程序员今晚不回家（抖音号）
相信很多人可能和我有着一样的感觉，总感觉这两年像是在做梦，终日为生活忙忙碌碌，但却感觉不到充实。想分享点正能量的事情吧，但网上看到的要不是这明星出轨了，要不就是这直播怎么了。哎，想来想去，算了，还是来学习吧。学习使人明智，学习使人快乐！
1、第一种是使用highcharts中的Highmaps绘制地图。
Highcharts 是一个用纯 JavaScript 编写的一个图表库，可以用来绘制直线图、曲线图、区域图、柱状图等20多种图表。这里我们用其中的Highmaps来绘制中国地图。（Ps：官方地址：兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts ）效果如下：
实现步骤也很简单，具体如下
- 在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> - 在body中加入div
<!-- Highmaps --> <div id="container" style="height:450px;"></div> - 在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 ）效果如图：
具体实现步骤类似：
- 在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> - 在body中加入div
<!-- Echarts --> <div id="echarts-province"></div> - 在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>
这两种方法还可以绘制好看的图表，有兴趣的童鞋可以试试。这里只分享简单的教程，希望学习知识也变得简单一些。
