Echarts实践-实现3D地球
昨天被拉进⼀个项⽬组，会接触⼀些与Echarts的相关任务，讲实话，在此之前echarts.js有使⽤过，但是很少，很浅，那我就且学且准备。因为没有实际数据所以我就全部使⽤模拟数据，我先在coding上新建⼀个项⽬，然后项⽬初始化，vue init webpack ... 这些跳过。项⽬引⼊cnpm install echarts --save;
cnpm install echarts-gl --save;
在main.js配置
import echarts from 'echarts'
import 'echarts-gl'
Vue.prototype.$echarts = echarts
我再main.js中引⼊了echarts，并全局注册，所以以下页⾯就不需要再次引⼊，要⽤的时候直接调⽤this.$echarts这个对象
开始说echarts相关的，我做了⼏个例⼦我后期还会继续往上增加。先来⼏张效果图：
1.中国地图简单飞⾏线路
2.3d地球攻击线 (给地球加了个⽪肤就是好看⼀些)
3.3d地球攻击线2
使⽤echarts需要注意的是在对应页⾯要引⼊
世界地图：import world from 'echarts/map/js/world.js'
中国地图：import china from 'echarts/map/js/china.js'
这⾥贴⼀份源码3d地球攻击线源码：
<template>
<!-- 例⼦6 -->
<div>
<div
class="earthmap"
id="chart_example6"
>
</div>
</div>
</template>
<script>
import $ from 'jquery'
import world from 'echarts/map/js/world.js'
import china from 'echarts/map/js/china.js'
export default {
data() {
return {}
},
mounted() {
this.initData()
},
methods: {
// 绘制图表
initData() {
//初始化canvas节点
let myChart = this.$echarts.init(
)
//随机获取点点坐标函数
let rodamData = function() {
let name = '随机点' + Math.random().toFixed(5) * 100000        // 终点经度
let longitude = 105.18
// 终点纬度
let latitude = 37.51
// 起点经度
let longitude2 = Math.random() * 360 - 180
// 起点纬度
let latitude2 = Math.random() * 180 - 90
return {
coords: [
[longitude2, latitude2],
[longitude, latitude]
],
value: (Math.random() * 3000).toFixed(2)
}
}
// 使⽤世界地图⽣成地球⽪肤
let canvas = ateElement('canvas')      let myChart2 = this.$echarts.init(canvas, null, {        width: 4096,
height: 2048
})
myChart2.setOption({
backgroundColor: 'rgba(3,28,72,0.3)',
title: {
show: true
},
geo: {
type: 'map',
map: 'world',
left: 0,
top: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
],
zoom: 0,
roam: false,
itemStyle: {
borderColor: '#000d2d',
normal: {
areaColor: '#2455ad',
borderColor: '#000c2d'
},
emphasis: {
areaColor: '#357cf8'
}
},
label: {
fontSize: 24
}
},
series: []
})
//echarts配置
let option = {
backgroundColor: '#013954',
title: {
text: '3D地球攻击线',
subtext: '随机模拟数据',
x: 'center',
y: 100,
textStyle: {
color: '#fff',
fontSize: 25
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data: ['北京 Top10', '上海 Top10', '⼴州 Top10'],
textStyle: {
color: '#fff'
},
selectedMode: 'single'
setoption
},
globe: {
baseTexture: myChart2,
environment: this.$aphic.LinearGradient(            0,
1,
1,
1,
[
{
offset: 0,
color: '#000000' // 天空颜⾊
},
{
offset: 0,
color: '#000000' // 地⾯颜⾊
},
{
offset: 0,
color: '#000000' // 地⾯颜⾊
}
],
true
),
// shading: 'lambert',
light: {
// 光照阴影
main: {
color: '#fff', // 光照颜⾊
intensity: 1.2, // 光照强度
/
/ shadowQuality: 'high', //阴影亮度
shadow: false, // 是否显⽰阴影
alpha: 40,
beta: -30
},
ambient: {
intensity: 0.5
}
},
viewControl: {
alpha: 30,
beta: 160,
// targetCoord: [116.46, 39.92],
autoRotate: true,
autoRotateAfterStill: 10,
distance: 240
}
},
series: [
{
name: 'lines3D',
type: 'lines3D',
coordinateSystem: 'globe',
effect: {
show: true
},
blendMode: 'lighter',
lineStyle: {
width: 2
},
data: [],
silent: false
}
]
}
// 随机数据 i控制线数量
for (let i = 0; i < 200; i++) {
option.series[0].data = option.series[0].at(rodamData())
}
//画图
myChart.setOption(option)
window.addEventListener('resize', function() {
})
}
},
watch: {},
created() {}
}
</script>
以上代码仅供参考，看了echarts官⽅和w3c的echarts教程慢慢了解很多配置熟悉；
官⽹：；
w3c：
感兴趣可以看看；
如果你也是初学echarts⼜有兴趣加⼊我的项⽬例⼦联系我我拉你进项⽬组，我们共同进步；