Page effect is as follows:
Project is structured as follows:
The introduction of the package
"dependencies": { "core-js": "^3.3.2", "register-service-worker": "^1.6.2", "vue": "^2.6.10", "vue-aplayer": "^1.6.1", "vue-router": "^3.1.3", "vuex": "^3.0.1", "echarts": "^4.4.0", "echarts-gl": "^1.1.1", "element-ui": "^2.11.1" },
Earth page
<template>
<div class="earthmap" id="earth">
</div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/map/js/world.js'
import 'echarts-gl'
export default {
data(){
return{
mapChart:{},
// dimensional spherical lines
option: {
globe: {
globeRadius: 83 ,
baseTexture: '' , // anastomosis spherical and planar maps
Silent: to true ,
Environment: the require ( " ../static/img/background.jpg " ), // Background
heightTexture: the require ( " ../static/img/map.jpg " ), // earth entire lines
Shading: ' realistic graphics or ' ,
light: {
main: {
color: '#fff',
intensity: 0,
shadow: false,
shadowQuality: 'high',
alpha: 55,
beta: 10
},
ambient: {
color: '#fff',
intensity: 1
}
},
postEffect: {
enable: false,
SSAO: {
enable: true,
radius: 10
}
},
// Earth's rotational time if they are to true autoRotate own
viewControl: {
autoRotate: true,
animationDurationUpdate: 2000,
targetCoord: ''
}
},
series: [
/* {
type: 'scatter3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
symbolSize: 20,
symbol: 'pin',
silent: false,
itemStyle: {
color: function (params) {
var colorList = ['rgb(246, 153, 180)', 'rgb(118,77,209)'];
if (params.dataIndex % 2 != 0) {
return colorList[0]
} else {
return colorList[1]
}
},
opacity: 1
},
label: {
show: true,
textStyle: {
fontSize: 20
},
formatter: function (params) {
if (params.dataIndex % 2 != 0) {
return 'Destination:\n' + params.name
} else {
return 'Departure:\n' + params.name
}
},
position: 'top'
}
}*/
{
name: 'lines3D',
type: 'lines3D',
coordinateSystem: 'globe',
effect: {
show: true,
period: 2,
trailWidth: 3,
trailLength: 0.5,
trailOpacity: 1,
trailColor: '#0087f4'
},
blendMode: 'lighter',
lineStyle: {
width: 1,
color: '#0087f4',
opacity: 0
},
data: [],
silent: false,
}
]
},
// plane planet Earth is mainly set style
mapOption: {
the backgroundColor: ' RGBA (20,104,121,0.71) ' , // when the spherical mapping is a perspective and ocean color
visualMap: {
show: false,
I: 0 ,
max: 100000
},
series: [
{
type: 'map',
map: 'world',
left: 0,
top: 0,
right: 0,
bottom: 0,
environment: 'rgba(0,0,0,0)',
boundingCoords: [
[-180, 90],
[180, -90]
],
itemStyle: {
normal: {
borderWidth: 2,
the borderColor: ' RGB (0,232,232) ' , // the color lines of the earth
areaColor: {
type: 'linear',
x: 0,
y: 0 ,
X2: 0 ,
Y2: . 1 ,
// adjacent color change of each section from top to bottom
colorStops: [{
offset: 0.2 , Color: ' RGB (0,48,62) ' // color at 0%
}, {
offset: 0.8 , Color: ' RGBA (0,179,188,0.8) ' // color at 100%
}],
Global : to false // defaults to false
},
}
}
}
]
}
}
},
mounted(){
this.initMap()
},
methods:{
initMap(){
this.mapChart = echarts.init(document.createElement('canvas'), null, {
width: 3086,
height: 3048
});
// Get vessel and initializes
the this .myChart = echarts.init (document.getElementById ( ' Earth ' ))
// the earth plane and spherical three-dimensional texture overlaps
the this .mapChart.setOption ( the this .mapOption)
the this .option.globe.baseTexture = the this .mapChart
//随机划多条线
for (let i = 0; i < 150; i++) {
this.option.series[0].data = this.option.series[0].data.concat(this.rodamData())
}
this.myChart.setOption(this.option);
// this.myChart.setOption(this.mapOption);// 平面展开图
},
// call the scribing method
rodamData () {
// name = 'random point' the let + Math.random (). ToFixed (. 5) * 100000
// the let longitude = Math.random () * + 62 is 73 is
the let longitude = 105.18
longitude2 the let = Math.random () * 360 - 180 [
// the let Latitude = Math.random () * 50 + 3.52
the let Latitude = 37.51
the let latitude2 = Math.random () * 180 [ - 90
return {
coords: [
[longitude2, latitude2],
[longitude, latitude]
],
value: (Math.random() * 3000).toFixed(2)
}
}
}
}
</script>
<style>
.earthmap{
width: 100%;
height: 700px;
background: rgba(16, 167, 202, 0.39);
}
</style>
Uniform page home.vue
<template>
<div class="home">
<div style="width: 100%;height: 100%">
<Earth></Earth>
</div>
</div>
</template>
<script>
import Earth from "@/components/Earth";
export default {
components: {
Earth
},
data() {
return {
}
}
};
</script>
Home App.vue
<template>
<div id="app">
<Home/>
<router-view/>
</div>
</template>
<script>
import Home from '@/views/Home'
export default {
components: {
Home
}
}
</script>
<style lang="less">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
width: 100%;
height:100%;
}
</style>