超简单的，基于echarts+vue3实现酷炫地球可视化
效果图如下：
前期准备：
地球纹理
背景图
echarts官方中文文档 echarts.apache.org/zh/index.ht…
接下来直接上代码啦：
一、安装echarts和echarts-gl，并引入：
安装依赖
npm install echarts
npm install echarts-gl
或
yarn add echarts
yarn add echarts-gl
引入
import * as echarts from "echarts";
import "echarts-gl";
二、渲染地球：
template
<template>
<div id="earth-chart" class="chart-box"></div>
</template>
配置项
/** 使用 echarts 绘制世界地图的实例作为纹理 */
var canvas = document.createElement("canvas");
/** 可视化配置 */
const option = reactive({
backgroundColor: "#000",
globe: {
height: 1000,
top: 0,
baseTexture: "地球纹理图地址",
environment: "背景图地址",
// 地球交互动效
viewControl: {
autoRotate: true, // 是否开启视角绕物体的自动旋转查看
autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
autoRotateAfterStill: 1, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
targetCoord: [116.46, 39.92], // 定位到北京autoRotateDirection: "ccw",
alpha: 30,
beta: 160,
},
heightTexture: "地球纹理图地址",
displacementScale: 0.01,
shading: "color",
atmosphere: {
show: true,
color: "#0579ff",
glowPower: 3,
innerGlowPower: 0.7,
},
light: {
main: {
intensity: 5,
shadow: true,
},
},
postEffect: {
//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
enable: false, //是否开启
SSAO: {
//环境光遮蔽
radius: 1, //环境光遮蔽的采样半径。半径越大效果越自然
intensity: 1, //环境光遮蔽的强度
enable: true,
},
},
},
// 地球文字显示信息配置
series: [
{
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.6, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
width: 2.5, //尾迹线条宽度
opacity: 0.4, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
color: "#0579ff",
},
type: "lines3D",
coordinateSystem: "globe",
blendMode: "lighter",
data: [],
silent: false,
},
],
});
渲染可视化
/** 渲染可视化 */
const renderChart = () => {
let initEchart = echarts.init(document.getElementById("earth-chart"));
option && initEchart.clear();
option && initEchart.setOption(option, true);
// 重绘
window.onresize = function () {
initEchart.resize();
};
};
nextTick(() => {
renderChart();
});
三、添加飞线：
/** 生成随机飞线数据 */
function rodamLineData() {
// 模拟数据，构造飞线的起始经纬度
let longitude = 116.2;
let 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),
};
}
/** 随机数据 i控制线数量 */
const generateLine = () => {
for (let i = 0; i < 10; i++) {
option.series[0].data = option.series[0].data.concat(rodamLineData());
}
};
在renderChart中执行生成飞线方法
//飞线
generateLine();
全局代码附上：
<template>
<div id="earth-chart" class="chart-box"></div>
</template>
<script setup>
import * as echarts from "echarts";
import "echarts-gl";
import { getImageUrl } from "@/utils/common";
/*------------------------------------------------变量----------------------------------------------------*/
/** 使用 echarts 绘制世界地图的实例作为纹理 */
var canvas = document.createElement("canvas");
/** 可视化配置 */
const option = reactive({
backgroundColor: "#000",
globe: {
height: 1000,
top: 0,
baseTexture: getImageUrl("charts/earth.jpg"), //地球纹理图片地址
environment: getImageUrl("charts/starfield.jpg"), //背景图图片地址
// 地球交互动效
viewControl: {
autoRotate: true, // 是否开启视角绕物体的自动旋转查看
autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
autoRotateAfterStill: 1, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
targetCoord: [116.46, 39.92], // 定位到北京autoRotateDirection: "ccw",
alpha: 30,
beta: 160,
},
heightTexture: getImageUrl("charts/earth.jpg"), //地球纹理图片地址
displacementScale: 0.01,
shading: "color",
atmosphere: {
show: true,
color: "#0579ff",
glowPower: 3,
innerGlowPower: 0.7,
},
light: {
main: {
intensity: 5,
shadow: true,
},
},
postEffect: {
//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
enable: false, //是否开启
SSAO: {
//环境光遮蔽
radius: 1, //环境光遮蔽的采样半径。半径越大效果越自然
intensity: 1, //环境光遮蔽的强度
enable: true,
},
},
},
// 地球文字显示信息配置
series: [
{
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.6, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
width: 2.5, //尾迹线条宽度
opacity: 0.4, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
color: "#0579ff",
},
type: "lines3D",
coordinateSystem: "globe",
blendMode: "lighter",
data: [],
silent: false,
},
],
});
/*----------------------------------------------事件函数--------------------------------------------------*/
/** 生成随机飞线数据 */
function rodamLineData() {
// 模拟数据，构造飞线的起始经纬度
let longitude = 116.2;
let 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),
};
}
/** 随机数据 i控制线数量 */
const generateLine = () => {
for (let i = 0; i < 10; i++) {
option.series[0].data = option.series[0].data.concat(rodamLineData());
}
};
/** 渲染可视化（render chart） */
const renderChart = () => {
let initEchart = echarts.init(document.getElementById("earth-chart"));
//飞线
generateLine();
option && initEchart.clear();
option && initEchart.setOption(option, true);
// 重绘
window.onresize = function () {
initEchart.resize();
};
};
/*----------------------------------------------生命周期--------------------------------------------------*/
nextTick(() => {
renderChart();
});
</script>
<style scoped lang="scss">
.chart-box {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
}
</style>
