Vue中实现3D得球自动旋转

最新推荐文章于 2025-05-19 15:05:02 发布

原创

最新推荐文章于 2025-05-19 15:05:02 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ecmascript #前端框架

该博客介绍了在Vue项目中使用echarts-gl库来创建3D地球旋转的效果。首先，通过安装echarts和echarts-gl来准备环境，然后详细讨论了earth3D组件的实现，包括earth3D.vue、debounce.js和Globe3d.js的使用。除此之外，还提到了近期关于视频号变现、互联网红利等非技术话题。

具体实现

安装echarts

在终端下安装echarts

npm install -D echarts

安装echarts-gl

在终端下安装echarts-gl

npm install -D echarts-gl

earth3D组件

earth3D.vue

<template>
    <div class="globe3d-earth-container" >
         <div class="globe3d-earth"  ref="Globe3d"></div>
    </div>
</template>

<script>
    import Vue from "vue";
    import echarts from "echarts";
    import "echarts-gl";
    import option from './Globe3d.js'
    import { debounce } from "./debounce.js";
    Vue.prototype.echarts = echarts;
    export default {
        name: "earth3D",
        data() {
            return {
                myChart: null,
                resizeHandler: null
            }
        },
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            this.myChart = echarts.init(this.$refs.Globe3d);
            // 使用刚指定的配置项和数据显示图表。可视化3D
            this.m

最低0.47元/天解锁文章