vue引入echarts实现3D地球旋转 不设置背景图片

最新推荐文章于 2025-08-29 15:05:46 发布
原创 最新推荐文章于 2025-08-29 15:05:46 发布 · 2.5k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #echarts #3d

本文介绍了如何在Vue项目中利用echarts和echarts-gl库实现3D地球旋转效果。首先，通过npm安装echarts和echarts-gl。接着，引入世界地图数据和所需资源文件。最后，配置echarts图表选项，不设置背景图片。

效果图：

 

1、安装 echarts 

  cnpm install echarts -S  或  npm install echarts -S

2、安装 echarts-gl

cnpm install echarts-gl@1.1.1 --save 

3、引入三个包

import echarts from "echarts";

import "@/../node_modules/echarts/map/js/world.js"; // 引入世界地图数据

import "echarts-gl";

4、需要两张地图图片 和pisa.hdr文件  （附官网地址）图片和文件最好现在到本地使用

https://cdn.jsdelivr.net/gh/apache/e

最低0.47元/天 解锁文章
羊羊李
关注
transition 实现div伸缩动画、3D翻转动画(vue版)、elementui走马灯
cxf_L的博客
11-15 1874
transition 实现div伸缩动画、3D翻转动画(vue版)、elementui走马灯
echart实现地球外环绕卫星效果
zhao_66的博客
12-28 3140
在一个echart组件中生成两个及以上地球： globe:[{ globeRadius:180 }, { globeRadius:250 }], 在globe中使用数组，将每个地球的属性分别设置。 ##效果一：地球套地球 代码如上。 ##效果二：地球外环绕卫星 将外面的地区设置为不可见，然后使用lines图表，将折现设置成多点连接的曲线，其上设置symbol形状为卫星即可。 var op...
第二章 Vue + Three.js 实现鼠标拖拽旋转 3D 立方体交互实践
最新发布
苦逼前端分享苦逼经验
08-29 1301
本文介绍了如何使用Vue3和Three.js实现鼠标拖拽控制3D立方体旋转的功能。主要内容包括：1）环境搭建和Three.js基础概念；2）完整实现步骤，从初始化场景、相机、渲染器到添加光照和鼠标交互；3）核心交互逻辑解析，通过状态标记和坐标计算实现拖拽旋转；4）常见问题解决方案和优化建议；5）扩展方向，如多物体交互和纹理贴图。该教程适合Three.js新手学习基础3D交互开发，掌握"事件监听+状态更新+重新渲染"的核心思路。
vue + threejs实战，实现3D 360度 旋转查看物体
weixin_43931376的博客
06-08 5200
前端3D效果实现
Vue中实现3D得球自动旋转
itclanCoder
09-08 1012
具体实现安装echarts在终端下安装echartsnpm install-D echarts安装echarts-gl在终端下安装echarts-glnpm install-D echarts-glearth3D组件earth3D.vue<template> <divclass="globe3d-earth-container"> <...
Vue中使用Echarts构建3D地球
m0_56219678的博客
02-17 5630
Vue中使用Echarts构建3D地球
基于echarts的3d地球数据可视化展示.zip
05-28
在本项目中，"基于echarts的3d地球数据可视化展示.zip" 提供了一个使用ECharts库实现3D地球数据可视化的示例。ECharts是一个由百度开发的开源JavaScript图表库，它支持丰富的2D图表类型，同时也扩展到了3D场景，如3D...
3D自动旋转城市地图(湖南)区域柱图显示；echarts解决方案附所有代码；可以更换成任意省市
07-16
- 引入Echarts库和其他必要库（如jQuery）。 - 初始化Echarts实例，配置地图、柱状图以及动画的相关参数。 - 加载地图数据和数据列。 - 使用setOption方法更新配置并绘制图表。 - 定义旋转动画函数，调整地图...
vue+echarts+3D地图 制作大屏
qq_39285178的博客
02-18 8827
基于3d地图做的一些效果，首先看下效果图 用户不直接操作地图，因为是大屏，只做展示使用，右边列表有两种模式，如果列表数据没有撑开盒子，每3秒轮播高亮，高亮到那个地区，地图上就高亮那一块区域，且显示对应的tooltip(这里没有使用echarts中的tooltip,因为高亮地图的时候，2d地图可以主动触发tooltip出现，但是3d里面不支持，所以这个弹框是我自己写的，因为项目中只有3个地区的数据，只用写3个弹框就行，如果梅个区域都有数据，不建议使用这种方式) 第二种展示方式就是，如果右边列表数据过多
Vue中使用Echarts构建3D地球层+模拟时钟
weixin_43899542的博客
10-26 2363
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obta
3D相册,拖拽旋转
威士忌荡出の忧伤的博客
10-30 1701
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css3+3D相册&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&amp
效果3D旋转的源码
07-03
FLEX 3D 旋转 源码 代码看看 改改 可以出很多有趣效果的
vue-cesium UMD双击实现地球旋转，单就停止旋转（方法一）
11-26
html + vue-cesium UMD; cesium 3D 地球鼠标事件，（双击，单击）；双击实现地球旋转，单就停止旋转（方法一）
vue-cesium UMD双击实现地球旋转，单就停止旋转（方法二）
11-26
html + vue-cesium UMD; cesium 3D 地球鼠标事件，（双击，单击）；双击实现地球旋转，单就停止旋转（方法二）；游览器打开文件就可以看到效果
vue-xplan用Vue和three.js创建的旋转地球演示页面-Vue.js开发
05-27
带有Vue和threejs的旋转地球H5页面，这是原始H5站点的vue克隆。如何使用chrome移动调试模式touch来打开它。带有Vue和threejs的旋转地球H5页面，这是原始H5站点的vue克隆。如何使用chrome移动调试模式触摸并旋转地球并长按底部按钮，然后将其打开，您将看到魔术My H5可以3D滚动控制FIFA简介足球运动员面对猜谜游戏一款小型帆布游戏2016回顾
[vue3+js]实现3d旋转效果
weixin_41521961的博客
07-03 1334
【代码】[vue3+js]实现3d旋转效果。
echarts的3D类地球在vue中的使用
myisyourbb的博客
06-18 1956
步骤 1.安装 npm install echarts --save 使用echart的3d功能需要另外安装echarts-gl 安装指令： cnpm install echarts-gl 2.引入 这里就只写全局引入（写在main.js内），如果想要局部引入的话看这个链接: 最新的echarts在vue中的简单使用. import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3.使用 如果只是使用3D类型的图表其实安装引
Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-01 6266
基于threeJS的vue 3D展示组件。
Vue3炫酷可旋转的3D地球
特创数字
12-02 1153
现在，运行项目，你将看到一个可旋转的3D地球。你可以根据需要修改地球的颜色、大小等属性。接下来，我们创建一个Vue3项目，并在项目中引入Three.js库。
使用Vue和Echarts实现辽宁省3D地图展示
开发者可以在vue项目中引入ECharts，并将其嵌入到组件中，然后通过调用json文件中的地理数据来展示辽宁省的地图。 【知识点3】：ECharts图表库 ECharts是一个使用JavaScript实现的开源可视化库，它可以在Web浏览器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值