Echarts 3d地球实现(Vue框架)

最新推荐文章于 2025-04-02 10:29:05 发布

chen-localhost

最新推荐文章于 2025-04-02 10:29:05 发布

阅读量2k

点赞数 1

文章标签： echarts vue.js 信息可视化

本文链接：https://blog.youkuaiyun.com/qq_64372842/article/details/136322526

版权

最近迷上了echarts实现数据可视化了，也确实因为工作需要，目前公司需要我们来在自己的新厂房展厅把自己的产品展示出来，我所在研发部软件组，第一个想到的就是使用echarts来实现一个数据可视化的大屏了，下面就带着大家看看我这段时间使用Echarts来实现一个3D地球的过程:

1.环境准备工作

准备一个Vue的工程项目，然后导入两个配置echarts 和 echarts-gl 并引用到项目工程之中:

npm install echarts
npm install echarts-gl

2.编写代码

echarts 使用起来还是很方便的，结合echarts 官网给出的配置手册可以轻松完成数据可视化的配置工作，这边给出我的代码和实现效果，大家如果有什么不懂的可以评论在下面,看到会回复的。

<template>
    <div>
        <h1>这是3D地球的渲染界面</h1>
        <div class="myworld" ref="myworld"></div>
    </div>
</template>

<script>
// 引入世界地球的json文件！
import worldJson from '../../../src/static/others/json/world.json'
// 引入世界地图的图片
import earthjpg from '../../../src/static/img/earth.jpeg'
export default {
    data() {
        return {
        }
    },
    m