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

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

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

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下载）
```

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

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

一分钟教程：绘制中国地图相关推荐

[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等. 这篇文章主要是通过Echarts可视化介绍入 ...
使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
qcustomplot绘制热力图瀑布图_使用REmap绘制中国地图
上次我们介绍了使用ggplot2绘制中国热力地图,需要温习的同学可以点击以下链接使用ggplot2绘制中国地图 .在使用ggplot2绘制的时候,需要进行数据处理的步骤比较多,今天我们介绍一个新的 ...
Ant Design Charts绘制中国地图并动态添加标记点
绘制中国地图并动态添加标记点,在这里使用的是antd charts绘制,需要求只显示中国地图,并且跟踪物流信息使用组件地址: 图表 - Plot | Ant Design Charts 这里的引入方 ...
Basemap绘制中国地图
2022.06.02更新 CHN_adm_shp.zip 网盘下载链接: 链接:https://pan.baidu.com/s/11igf-bfDLuolI5HzEykzMw 提取码:oas6 201 ...
【Python 实战基础】如何绘制中国地图展示省份GDP数据
目录一.实战场景二.主要知识点文件读写基础语法字符串处理文件生成数据构建循环遍历三.菜鸟实战 1.创建 python 文件 2.运行结果一.实战场景实战场景: 如何绘制中国地图展 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...

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

一分钟教程：绘制中国地图相关推荐

最新文章

热门文章