Echarts 3D地图图表

已于 2023-02-07 15:56:23 修改
阅读量1.1w 收藏 29
点赞数 1
文章标签： echarts 前端 javascript
于 2019-07-30 09:07:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35119405/article/details/95067197
版权

需求：实现如图所示的3D地图图表

 

（1）原本使用的highcharts没有3d地图的功能，搜索插件也没有可替代的方案，选择echarts理由是在地图方面百度拥有毋庸置疑的实力

ECharts3D地图(详细示例——附有具体注释)_GRAY_KEY的博客-CSDN博客

（2）通过代码可以轻易写出例子的效果，但是想要写特定区域的地图则需要该地区相对应的json文件，需要通查询对应地区的相关的json文件，详细步骤如链接。

DataV.GeoAtlas地理小工具系列

 

选择需要的区域，并下载json文件即可

（3）通过替换json文件即可展示该地区的3D地图，图片中在3D地图的基础上还有一个柱形图，然后找到了这个例子，又牵扯到一个维度的问题，是实现过程中最难理解的部分，主要原理就是用visualMap属性来连接两个series实现的图表

https://gallery.echartsjs.com/editor.html?c=xLIkpVNt4M

（4）各个地区板块之间有一个高度的差异,查到的是通过给regionHeight的大小来实现，但是实际上使用的时候没有效果，官方文档写的也是语焉不详，之后用height属性可以实现

2023更新

使用geo3D API实现3D地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%; height: 800px;"></div>

    <script>	
		var myChart = echarts.init(document.getElementById('main'));
        // map.json查询 https://datav.aliyun.com/portal/school/atlas/area_selector 获取
		var uploadedDataURL = "map.json";
		myChart.showLoading();

		$.getJSON(uploadedDataURL, function(geoJson) {
		
			echarts.registerMap('map', geoJson);
			
			// 隐藏动画加载效果。
			myChart.hideLoading();			
			
			myChart.setOption({
                backgroundColor: '#222222',
                geo3D: [{
                    map: 'map',
                    roam: true, //开启缩放
                    label: {
                        show: true
                    },
                    shading: 'realistic',
                    regions: [
                        {
                            name: '南宁市',
                            // 官方文档regionHeight无效，需配置height属性
                            height: 8,
                            itemStyle:{
                                areaColor: 'skyBlue',
                                color: 'skyBlue',
                                borderColor: '#222222',
                                borderWidth: 1,
                                borderType: 'solid',
                            },
                        },
                        {
                            name: '防城港市',
                            height: 12,
                            itemStyle:{
                                areaColor: 'orange',
                                color: 'orange'

                            },
                        },
                        {
                            name: '柳州市',
                            height: 8,
                            itemStyle:{
                                areaColor: 'yellow',
                                color: 'yellow'
                            },

                        }
                    ]
                }],
                series:[{
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    data: [11,22,33,11,22,33,11,22,33],
                    barSize: 0.1,
                    minHeight: 0.2,
                    silent: true,
                    itemStyle: {
                    color: 'orange'
                    // opacity: 0.8
                    }
                }]
            })
			
		});
		
	</script>
</body>
</html>

需要在地图中加入柱状图，在series中配置柱状图即可

series:[{
    type: 'bar3D',
    coordinateSystem: 'geo3D',
    data: [
      {name: "南宁市", value: [108.320004,22.82402, 111], itemStyle: {color:'skyBlue'}},
      {name: "防城港市", value: [108.345478,21.614631, 222], itemStyle: {color:'orange'}},
      {name: "柳州市", value: [109.411703,24.314617, 88], itemStyle: {color:'orange'}},
    ],
    barSize: 1,
    // 注意：如果配置了区域的高度，minHeight需要高过配置的高度，不然出不了柱状图
    minHeight: 1,
    silent: true,
    itemStyle: {
      color: 'green'
    }
 }]

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%; height: 800px;"></div>

    <script>	
		var myChart = echarts.init(document.getElementById('main'));
        // map.json查询 https://datav.aliyun.com/portal/school/atlas/area_selector 获取
		var uploadedDataURL = "map.json";
		myChart.showLoading();

		$.getJSON(uploadedDataURL, function(geoJson) {
		
			echarts.registerMap('map', geoJson);
			
			// 隐藏动画加载效果。
			myChart.hideLoading();			
			
			myChart.setOption({
                backgroundColor: '#222222',
                geo3D: [{
                    map: 'map',
                    roam: true, //开启缩放
                    label: {
                        show: true
                    },
                    shading: 'realistic',
                    regions: [
                        {
                            name: '南宁市',
                            // 官方文档regionHeight无效，需配置height属性
                            height: 8,
                            itemStyle:{
                                areaColor: 'skyBlue',
                                color: 'skyBlue',
                                borderColor: '#222222',
                                borderWidth: 1,
                                borderType: 'solid',
                            },
                        },
                        {
                            name: '防城港市',
                            height: 12,
                            itemStyle:{
                                areaColor: 'orange',
                                color: 'orange'

                            },
                        },
                        {
                            name: '柳州市',
                            height: 8,
                            itemStyle:{
                                areaColor: 'yellow',
                                color: 'yellow'
                            },

                        }
                    ]
                }],
                series:[{
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    data: [
                        {name: "南宁市", value: [108.320004,22.82402, 111], itemStyle: {color:'skyBlue'}},
                        {name: "防城港市", value: [108.345478,21.614631, 222], itemStyle: {color:'orange'}},
                        {name: "柳州市", value: [109.411703,24.314617, 88], itemStyle: {color:'orange'}},
                    ],
                    barSize: 1,
                    minHeight: 20,
                    silent: true,
                    itemStyle: {
                        color: 'green'
                    // opacity: 0.8
                    }
                }]
            })
			
		});
		
	</script>
</body>
</html>

最终效果

 

Buiiil
关注
  • 1
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
地级市echarts 3d 地图数据可视化
08-31
本文将深入探讨如何利用ECharts实现地级市3D地图上的3D柱形图数据可视化，以及学习过程中可能遇到的关键知识点。 首先，我们要理解“地级市3D地图”的概念。地级市是指中国行政级别中的一个层级，通常包含若干个...
echarts3d地图散点数据陷进地图的解决方案
10-25
本主题聚焦于“echarts3d地图散点数据陷进地图的解决方案”，这是一个在使用ECharts进行3D地图可视化时可能会遇到的问题。当数据点分布于地图上时，有时会出现数据点“下陷”至地图内部的现象，这通常是由于数据处理...
记录使用Echarts-gl实现3D地图
LiuQjie的博客
06-05 7505
使用3D改变地图展示方向、标记坐标点显示
【3d地图】vue中使用echarts geo3D
m0_68324632的博客
06-24 1万+
想必对于一个前端来说，大家对echarts并不陌生，本次文章主要记录了我在使用echarts 渲染3d地图过程中的一点心得，本文代码包含详细的配置项注释~
eCharts实现3D地图并在地图初始化时标点
最新发布
m0_50170396的博客
05-17 533
eCharts地图3D效果，地图标点
echarts 自定义3D城市地图
weixin_43934967的博客
12-08 1868
这个需求第一方案想到的是使用高德地图JS API中”区域掩模“加上”立面体“实现，最后没有采用高德地图实现的原因是，高德地图无法实现透明天空，角度变换时，天空颜色无法去掉，不纠结天空的可以采用，省时省力并且自定义空间很大，最终采用echarts来实现。1、geo3D配合scatter3D，geo3D的regionHeight过高，会盖住scatter3D，解决方案是降低regionHeight值，5以内貌似没有问题，另一个是降低itemStyle的透明度，opacity设置低透明度。
vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）
qq_45234022的博客
11-16 3762
整理了一下Echarts做3D地图的vue组件
echarts 地图geo、geo3D 下穿
coldriversnow的专栏
06-15 3046
记录贴 echarts地铁图，3D地图的下穿 首先说平面的吧，平面地图的下穿通过echats的点击事件，获取到点击板块的名称，通过名称请求json数据，代码如下 myChart.on('click', function (params) { //params.name 结果是“重庆=chongqing” if (params.name.indexOf('=') > 0) {//后台传值geoname便于知道那个省市可以下穿 echarMap(params.name.indexOf
echarts 3D地图，地图区域点击触发事件
10-23
ECharts 3D地图是ECharts的一个特色功能，它允许用户以三维视角展示地理数据，增强视觉效果，使数据更加生动。通过使用ECharts 3D地图，我们可以展示不同地区的数据分布，例如人口、GDP、温度等，以帮助观众更好地...
echarts 3D地图，地图区域点击触发事件.rar.rar
01-04
2. **设置3D地图**：在ECharts配置中，需要指定图表类型为`'map3d'`，并提供地图的类型（如'world'表示全球地图）。还可以通过`viewControl`配置项调整视角，如旋转角度、倾斜度等。 3. **地图样式**：可以自定义...
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
Echart模板 可拖拽 geo3D 可视化 地图 叠加 散点 通用模板.rar
07-21
echart 实现 3d中国地图叠加 散点图 ，图表可任意拖拽
vue使用echarts与echarts-gl实现3d地图与 3d柱状图
weixin_48464215的博客
07-17 6163
主要使用vue+echarts+echarts-gl实现3d地图效果，以及3d柱状图效果
echarts实现中国地图记录篇之2D，3D地图
weixin_42632751的博客
02-22 3857
本文主要讲述了echarts 2D(平面)、3D地图的实现方式，以及实现过程中遇到的各种坑。本文主要讲述并实现了 echarts2D平面有标记点中国地图、echarts无标记点中国地图；有贴图的3Decharts中国地图；有标记点的echarts 3D地图；提供了 3D地图如何添加点击事件，3D地图如何在点击的时候高亮某块，3D点击setOption()时贴图丢失等问题的解决方案。
【地图可视化】Echarts地图上展示3D柱体
仨仨的博客
04-01 1万+
这是以前有这方面可视化的需求做的，找了很多资料，最后感觉这样的效果比较满意。
vue 使用echarts-gl实现3d旋转地图
YL
01-29 1470
之前也有使用过echarts开发项目中涉及到的地图功能，当时使用geo来实现地图轮廓，看上去有种3d的感觉。首先安装下echarts和echarts-gl依赖，在这里注意的点是，echarts-gl版本可以安装低版本，默认安装的依赖版本运行后一直报错。，这也是实现3d地图的主要属性，针对geo3d中每个属性的功能大家可以在echarts文档进行查阅，这里我就不一一细说了。这里我截图展示的，需要看地图动效的，大家可以在本地运行看下地图自动旋转效果。接下来我们看下完整的代码。安装好依赖，在页面引入。
vue中Echarts实现伪3D地图
q_qman的博客
10-21 3718
1.需求3d切面地图，颜色渐变，选中阴影，可切换地市，点击时展示地理数据，由于echarts 3d地图无法渐变，地图比例大小效果不好改成理想效果，所以通过伪3d方式实现。最终实现如下图： 2.代码 <template> <div ref="myEchart" class="map-echart"> </div> </template> <script> import echarts from 'echarts' export def
Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
热门推荐
~朴：shu的博客
07-04 2万+
使用Apache Echarts绘制中国、省市级、自定义地图的方法
青岛echarts3d地图
11-11
青岛echarts3d地图是一种基于echarts框架的三维地图可视化工具，它能够以立体的形式展示青岛市的地理信息和空间数据。通过echarts3d地图，可以直观地展示青岛市的地理位置、地形特征、城市分布、交通网络等空间信息，让人们可以更直观地了解青岛市的地理环境和城市结构。 在青岛echarts3d地图中，用户可以通过鼠标拖动、缩放，自由地探索青岛市的各个角落，了解青岛的地理位置和海岸线，同时也可以查看青岛市内的主要城市、岛屿、公园、景点等地点。除此之外，echarts3d地图还支持添加自定义的数据信息，比如人口密度、经济指标、环境数据等，可以通过图表或者热力图等方式展示在地图上，帮助用户更全面地了解青岛市的发展和现状。 青岛echarts3d地图不仅可以用于地理信息展示，也可以用于城市规划、旅游推广、教学演示等多种用途。它简单易用的特点，使得用户都可以轻松上手，运用echarts3d地图进行地理空间数据的可视化呈现。同时，echarts3d地图还能通过API接口嵌入到网页中，方便与其他网页内容进行交互，为用户提供更丰富的地理信息服务。总的来说，青岛echarts3d地图为人们提供了一种更直观、更生动的方式来了解青岛市的地理环境和空间信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值