vue3+echarts实现3D地球+飞线-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+echarts实现3D地球+飞线。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

vue echars 3d 地球,echarts,前端,javascript

1、下载

指令

 npm install echarts --save 
 npm install echarts-gl

我的版本：

vue echars 3d 地球,echarts,前端,javascript

2、html容器

<div ref="worldBox" style="width: 500px;height: 500px;"></div>

3、js代码

<script setup>
    import { onMounted,ref} from 'vue'
    import * as echarts from "echarts";
    import "echarts-gl";
    import earthBg from "../../assets/echarts/earth-bg.png";//导入背景纹理

    const worldBox = ref(null)

    onMounted(async () => {
        world_fun();
    });

    const world_fun = () =>{
        var BlChart = echarts.init(worldBox.value);
        var option = {
                globe: {
                    baseTexture: earthBg, // 地球表面覆盖的图片
                    shading: 'color', // 地球中三维图形的着色效果
                    zoom: 2,
                    viewControl: {
                        autoRotate: true, // 自动旋转
                        autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10也就是36秒转一圈。
                        autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
                        rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
                        targetCoord: [116.46, 39.92], // 定位到北京
                        maxDistance: 400,
                        minDistance: 200
                    }
                },
                series: [{
                    name: "lines3D",
                    type: "lines3D",
                    coordinateSystem: "globe",
                    effect: {
                        show: true,
                    },
                    blendMode: "lighter",
                    lineStyle: {
                        color:'#fff',
                        width: 1,
                    },
                    data: [],
                    silent: false,
                    }, ],
      };
      // 随机数据 i控制线数量
      for (let i = 0; i < 30; i++) {
        option.series[0].data = option.series[0].data.concat(randomData());
      }
    BlChart.setOption(option);
    window.onresize = () => {
      BlChart.resize();
        };
    }

    // 随机生成起始及终点经纬度坐标
    const randomData = () => {
      let name = "随机点" + Math.random().toFixed(5) * 100000;
      // 起点经纬度-北京
      let longitude = 116.2,
        latitude = 39.56;
      // 随机终点经纬度
      let longitude2 = Math.random() * 360 - 180;
      let latitude2 = Math.random() * 180 - 90;
      return {
        coords: [
          [longitude, latitude],
          [longitude2, latitude2],
        ],
        value: (Math.random() * 3000).toFixed(2),
      };
    }
</script>

附加纹理图

vue echars 3d 地球,echarts,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-767207.html