这篇文章给大家聊聊关于echarts中国地图,以及中国地图绘制对应的知识点,希望对各位有所帮助,不要忘了收藏本站哦。
一、「Python」使用Pyecharts生成疫情分布地图
最近受江苏疫情影响,好多小伙伴都居家办公咯!为了密切关注疫情动态,最近写了爬取疫情分布的脚本,参考上篇链接。
既然我们已经获得了相应的江苏各个地级市的疫情数据,那么我们如何来使用Python实现将数据可视化在地图上呢?
Apache Echarts是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而 Python是一门富有表达力的语言,很适合用于数据处理。当数据分析遇上数据可视化时,pyecharts诞生了。
简单来说,pyecharts具有以下特性:
因为我们需要使用pycharts绘制地图,此时我们还需要安装相应的地图文件包:
echarts-countries-pypkg包为全球国家地图
echarts-china-provinces-pypkg包为中国省级地图
echarts-china-cities-pypkg包为中国市级地图
安装完上述绘制地图相关的python包后,我们接下来开始画疫情分布地图。
首先,我们先来查看一段Pyecharts相关实现:
运行后会在当前目录生成 map_jiangsu_0803.html,用浏览器打开后结果如下:
当鼠标移动到对应区域后,会显示出对应地级市今日新增人数。
上述脚本虽然可以实现我们的功能,但是颜色灰灰的,太过于单调,接下来我们来想办法进行美化,实现代码如下:
运行后会在当前目录生成 map_jiangsu_0803_new.html,用浏览器打开后结果如下:
同理我们可以得到现有确诊人数分布如下:
进而我们可以得到累计确诊人数分布如下:
二、如何在中国地图上画出柱状图
要在中国地图上绘制柱状图,您需要使用一些工具和数据。以下是大体步骤:
1.获取中国地图数据:您可以从公开的数据源(例如开源地图平台)获取中国地图的GeoJSON数据。
2.将地图数据导入到数据可视化工具(如Echarts)中。
3.根据您的数据,创建一个柱状图系列。
4.将柱状图系列与地图数据关联:通过在图例或标签上链接到数据系列,可以使读者在地图上看到柱状图。
5.自定义样式:您可以自定义柱状图的样式,包括颜色,宽度,高度等。
6.如果需要,您还可以添加交互式功能:例如,当用户点击柱状图时,可以在地图上突出显示相应的区域。
请注意,这是一个基本的步骤,具体实施可能因您的具体需求和工具而有所不同。
三、如何用ECharts动态在地图上标识点
ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的.
首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标.
title:标题,显示这个地图所表示的名称
text:'清大云点亮中国',
subtext:'Tsingda.Cloud',
sublink:'http://www.eee114.com',
toolbox:工具栏,显示一些显示的工具,放大,缩小,查看数据集,下载图像等
dataView:{ show: true, readOnly: false},
legend:图标显示,当series有多个地图时,这个值用到显示多个地图的图标,可以是横向显示和纵向显示
data: ['在线','离线'],//在线和离线对应的是series的名字
selectedMode: false,//选中悬浮
series:地图显示,用来叠放显示地图,你可以定义多个,它们之间的关系是第一个在最上面,以此类推.
}, emphasis:{ color:"rgba(128, 128, 128, 0.5)"}
markPoint:点标识,用来标识地图上的后,这些点通常是被存储在一个geoCoord对象上,这个对象是一个字典,这在文章开头已经介绍过.
large: true,//这个选项,悬浮自动失效
shadowColor:'rgba(37, 140, 249, 0.8)',
markPoint里的data对象是这个地图上需要显示的点,它是一个字符型数组,用来存储geoCoord里的键!
setOption:将地图对象添加到指定的地图对象上
var myChart= echarts.init(document.getElementById('main'));
动态构建地图上的点标识markPoint
大概的思路是将要标记的点动态付给geoCoord和markPoint的data对象上,这样就可以动态在地图上标示点了
$.get("/map/GetOffMap", function(data){
option.series[0].geoCoord[data[i].longitude+"_"+ data[i].latitude]= [parseFloat(data[i].longitude), parseFloat(data[i].latitude)];
option.series[1].markPoint.data.push({ name: data[i].longitude+"_"+ data[i].latitude});
四、echarts3的中国地图省份名称位置都不在省份中间,位置怎么调整
1、如果地图数据是JSON文件,你最好格式化一下,然后搜索你要修改位置的省份名称或城市名称,紧挨着名称前面的元素cp就表示名称所在座标,如下图所示:更改此座标就可以了,如果不知道具体应该放在哪个座标,可以使用百度地图座标拾取。
2、另外:更改JSON文件后记得清空浏览器缓存。清空缓存,清空缓存,清空缓存。重要的事说三遍。
五、ECharts3怎么加载china.js地图
看了echarts的demo以及网上大家使用echarts的经验。我使用的是大家都推荐的模块化单文件引入。
1、首先要去echarts和zrender官网上下载需要的文件;
2、然后将下载下来的文件放在你项目的目录下;
4、引用相关的文件后可能还会出现很多的小问题,主要去看看js文件目录是否正确。
5、扩展地图插件的时候或者有别的需求需要引入config文件时,要注意一定要将引用的代码放在function(ec){}中,这样就不会报[MODULE_MISS]"echarts/config" is not exists!错了
6、调试完成后,就可以见到你想要看到的图片啦
六、我用的echarts中国地图怎么获取到当前选中的区域id或者名称
1、第步新建静态页面bar.html修改title并引入echarts js文件图所示:
2、第二步添加条状图容器插入div并给id属性宽度高度图所示:
3、第三步编写条状图js代码添加数据式图所示:
4、第四步预览该图形界面看效图图所示:
5、第五步编写点击条状图柱获取namevalue图所示:
6、第六步再预览该界面打浏览器控制台查看打印结图所示:
七、如何在html中绘制一个地图有哪些方法可以分享
这里介绍一种简单的方法—echarts,一个前端网页可视化库,可以快速绘制漂亮、简洁的中国地图,下面我简单介绍一下实现过程,主要内容如下:
1.首先,下载echarts.min.js,这个直接到ecahrts官网下载就行,如下,也就不到750k,很快就能下载成功:
2.接着,下载china.js,因为绘制的是中国地图,所以必须要单独下载这个js文件,这个可以直接到网上搜一下,很多,GitHub也有,大概60k左右,直接点击下载就行,如下:
3.最后就是在html网页中编码实现绘制中国地图了,主要步骤及截图如下:
首先,我们创建一个html文件,在head标签中依次引入echarts.js和china.js文件,在body标签中创建一个div容器,用于放置绘制的地图,代码如下:
接着,我们需要js随机生成一些测试数据,用于在绘制地图时,根据数值显示不同颜色的地区,代码如下,这里放在body标签里就行:
然后,就是绘制地图,配置相关数据和属性,这里可以根据自己需要,自行设置相关参数和选项,如下,很简单(可以参考echarts官网资料进行配置):
最后,保存html文件,用浏览器打开这个文件,绘制的中国地图效果如下,很不错吧:
至此,我们就完成了在html中绘制中国地图。总的来说,整个过程很简单,不难,借助echarts我们可以快速绘制地图,只要你有一定的前端基础,会简单的html,js,css,熟悉一下相关示例和代码,很快就能掌握的,当然,你也可以使用其他框架来绘制中国地图,像g2,d3等,都可以,网上也有相关教程和资料,感兴趣的可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。
echarts中国地图的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于中国地图绘制、echarts中国地图的信息别忘了在本站进行查找哦。