一、话不多说上代码
//vue 装依赖后直接引入，其他的话官网下载文件，3d需要gl支持，具体属性含义详见echarts Api
var echarts = require('echarts');
require('echarts-gl');
var worldfightchart = echarts.init(document.getElementById('globefight'));
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
width: 2048,
height: 1024
});
mapChart.setOption({
geo: {
type: 'map',
map: 'world',
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [[-180, 90], [180, -90]],
silent: true,
itemStyle: {
normal: {
borderColor: 'rgb(50, 50, 150)',
areaColor: 'transparent'
}
},
label: {
normal: {
textStyle: {
color: '#fff',
fontSize: 40
}
}
}
}
});
var series= [{
type: 'lines3D',
name: 'map',
effect: {
show: true,
period: 2,
trailWidth: 2.5,
trailLength: 0.3,
trailOpacity: 3,
trailColor: 'red'
},
lineStyle: {
width: 2,
color: 'red',
// color: 'rgb(118, 233, 241)',
opacity: 0.1
},
blendMode: 'lighter',
data:linesData
// data: [{
// 二维数组里两个相对应形成路径图连线,第一个起始坐标第二个终点坐标
// coords:[[-75.6971931, 45.4215296],[116.407, 39.9042]],
// meta暂时没用，本来想做formatter的移入展示信息，后来发现lines3D 还不支持
// meta: {
// from: "地球",
// name: "10-21 15:53:55发现攻击",
// to: "月球",
// value: 1
},
// fromName:'地球',
// toName:'月球'
// }]
}];
series.push({
type: 'scatter3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
label: {
show: false,
emphasis: {
show: false
}
},
symbolSize: 3,
itemStyle: {
color: 'yellow',
opacity: 0.7
},
data:arrFrom
// data: [
// scatter3D同样是二维数组，第一个起点，第二个终点，meta做formatter的移入展示信息scatter3D支持
// [-75.6971931, 45.4215296,{
// meta: { from: "地球",
// name: "10-21 15:53:55发现攻击行为",
// to: "月球",
// value: 1 },
// }
// ],
// [116.407, 39.9042,{meta: { from: "地球",
// name: "10-21 15:53:55发现攻击行为",
// to: "月球",
// value: 1 }, }]]
});
worldfightchart.setOption({
tooltip: {
trigger: 'item',
formatter: function (params) {
// console.log(params)
if (params.data[2] && params.data[2].meta) {
const meta = params.data[2].meta;
if (meta.from && meta.to) {
return `${meta.from}->${meta.to}
${meta.name}: ${meta.value}`;
} else {
return `${meta.name}: ${meta.value}`;
}
} else {
return ``;
}
}
},
// legend: {
// selectedMode: 'single',
// left: 'left',
// data: Object.keys(routesGroupByAirline),
// orient: 'vertical',
// textStyle: {
// color: '#fff'
// }
// },
// backgroundColor:'rgba(128, 128, 128, 0)',
globe: {
globeRadius: 80,
baseTexture: '/static/img/earth.jpg',
//environment: 'asset/world.topo.bathy.200401.jpg',
heightTexture: '/static/img/elev_bump_4k.jpg',
environment: 'none',
displacementScale: 0.04,
//displacementQuality: 'high',
//baseColor: '#000',
shading: 'realistic',
realisticMaterial: {
roughness: 0.2,
metalness: 0
},
postEffect: {
enable: true,
depthOfField: {
enable: false,
focalDistance: 150
}
},
temporalSuperSampling: {
enable: true
},
light: {
ambient: {
intensity: 0.5
},
main: {
intensity: 0.5,
shadow: false
}
// ambientCubemap: {
// // texture: '/static/img/pisa.hdr',
// exposure: 2,
// diffuseIntensity: 0.1,
// specularIntensity: 1
// }
},
viewControl: {
//autoRotate: false//控制是否自己旋转
},
layers: [{
type: 'blend',
blendTo: 'albedo',
texture: mapChart
}, {
type: 'blend',
blendTo: 'emission',
texture: '/static/img/night.jpg'
}, {
type: 'overlay',
texture: '/static/img/clouds.png',
shading: 'lambert',
distance: 10
}],
//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
silent: true
},
series: series
});
}
二、上图
由于项目原因，实际图片和实际代码不方便展示，纹理图去echarts官网下载