echarts中国地图(中国地图绘制)

admin 152 0

这篇文章给大家聊聊关于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中国地图的信息别忘了在本站进行查找哦。