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

最新推荐文章于 2024-09-13 16:17:49 发布
最新推荐文章于 2024-09-13 16:17:49 发布
阅读量2.3k 收藏 9
点赞数 2
文章标签： vue.js echarts 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyang_yang_/article/details/122063068
版权
本文介绍了如何在Vue项目中利用echarts和echarts-gl库实现3D地球旋转效果。首先，通过npm安装echarts和echarts-gl。接着，引入世界地图数据和所需资源文件。最后，配置echarts图表选项，不设置背景图片。
摘要由CSDN通过智能技术生成

效果图：

 

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/echarts-website@asf

最低0.47元/天 解锁文章
羊羊李
关注
vue运用之echart柱状图3D效果案例代码
日常笔记/总结/系列知识梳理
12-05 927
在ECharts中，创建3D柱状图需要使用GL模块，并设置type为’bar3D’柱状图案例可参考，我的这篇文章Echarts之柱状图。
echarts3d地球+3D Scatter+3D Lines做攻击趋势
Lun_dy的博客
12-11 2438
@[echarts](3d地球+3D Scatter+3D Lines做攻击趋势) 一、话不多说上代码 //vue 装依赖后直接引入，其他的话官网下载文件，3d需要gl支持，具体属性含义详见echarts Api var echarts = require('echarts'); require('echarts-gl'); var worldfightchart = echarts.init...
（纯css3实现）3d效果----环中心球形图片旋转 中心球形图片前面的元素透明度为1 图片后面透明度为0.1
weixin_57145577的博客
08-31 3128
图片示例 html <!-- 转动区域 --> <section id="slideshow"> <div class="entire-content"> <div class="content-carrousel"> <div class="shadow" v-for="(item,index) in funList" @click="toPage(item)"> <svg-icon :icon-class="item
Vue中实现3D得球自动旋转
itclanCoder
09-08 907
具体实现安装echarts在终端下安装echartsnpm install-D echarts安装echarts-gl在终端下安装echarts-glnpm install-D echarts-glearth3D组件earth3D.vue<template> <divclass="globe3d-earth-container"> <...
基于vue2的echarts3D地球
最新发布
qq_44699269的博客
09-13 564
采用vue2+js实现了echarts3D地球的放大、缩小和旋转
Vue中使用Echarts构建3D地球
m0_56219678的博客
02-17 5367
Vue中使用Echarts构建3D地球
3D相册,拖拽旋转
威士忌荡出の忧伤的博客
10-30 1613
&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
[vue3+js]实现3d旋转效果
weixin_41521961的博客
07-03 694
【代码】[vue3+js]实现3d旋转效果。
echarts的3D类地球在vue中的使用
myisyourbb的博客
06-18 1844
步骤 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类型的图表其实安装引
基于echarts的3d地球数据可视化展示.zip
05-28
在本项目中，"基于echarts的3d地球数据可视化展示.zip" 提供了一个使用ECharts库实现3D地球数据可视化的示例。ECharts是一个由百度开发的开源JavaScript图表库，它支持丰富的2D图表类型，同时也扩展到了3D场景，如3D...
手把手教你做出数据可视化项目（三）3D地球旋转
m0_67393686的博客
03-02 694
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图： 此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！ 使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。 echarts相关概念：https://blog.csdn.net/diviner_s/article/detai.
效果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回顾
Echarts 3D互联网地球旋转特效
07-24
Echarts 3D互联网地球旋转特效是一款echarts基于canvas绘制酷炫的3D互联网地球动画特效。
Vue3炫酷可旋转的3D地球
特创数字
12-02 924
现在，运行项目，你将看到一个可旋转的3D地球。你可以根据需要修改地球的颜色、大小等属性。接下来，我们创建一个Vue3项目，并在项目中引入Three.js库。
vue 3D地球 转动
u013095204的博客
12-12 1416
vue 3D地球 转动
vue3 echarts实现3d饼状
08-06
在Vue3中使用ECharts实现3D饼状图，首先你需要安装`vue-echarts`库，它是一个将ECharts封装为Vue组件的轻量级工具。以下是基本步骤： 1. **安装依赖**: 在你的项目里运行 `npm install vue-echarts echarts @types/echarts` 或者 `yarn add vue-echarts echarts @types/echarts` 2. **创建组件**: 创建一个新的Vue组件文件，例如`ThreeDPie.vue`，然后导入ECharts并设置图表配置: ```html <template> <div ref="chart"></div> </template> <script setup> import { ECharts } from 'vue-echarts'; const options = { tooltip: {}, visualMap: { pieceswise: [ {min: 0, max: 50, color: ['#31a354']}, // 分段颜色 {max: 100, color: ['#e76f51']} ], show: true, orient: 'horizontal', left: 'center' }, series: [ { type: 'pie', radius: '55%', data: [ {value: 335, name: 'iOS'}, {value: 310, name: 'Android'}, {value: 234, name: 'Others'} ], label: { normal: { position: 'outside' } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, animationDurationUpdate: 800, threeDim: { rotation: { x: -45 } } } ] }; const chartRef = ref(new ECharts({ init: (canvas) => { return new ECharts(canvas); } })); onMounted(() => { chartRef.value.setOption(options); }); </script> ``` 3. **在父组件中使用**: 现在你可以在其他需要的地方引入这个组件，并传入数据和配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值