昨天被拉進一個項目組，會接觸一些與Echarts的相關任務，講實話，在此之前echarts.js有使用過，但是很少，很淺，那我就且學且準備。
因為沒有實際數據 所以我就全部使用模擬數據，我先在coding上新建一個項目，然后項目初始化，vue init webpack ... 這些跳過。項目引入cnpm install echarts --save;
cnpm install echarts-gl --save;

在main.js配置

importechartsfrom'echarts'
import'echarts-gl'
Vue.prototype.$echarts=echarts

我再main.js中引入了echarts，并全局注冊，所以以下頁面就不需要再次引入，要用的時候直接調用this.$echarts這個對象

開始說echarts相關的，我做了幾個例子 我后期還會繼續往上增加。先來幾張效果圖：

1.中國地圖簡單飛行線路

2.3d地球攻擊線 (給地球加了個皮膚 就是好看一些)

3.3d地球 攻擊線2

使用echarts需要注意的是在對應頁面要引入

世界地圖：importworldfrom'echarts/map/js/world.js'
中國地圖：importchinafrom'echarts/map/js/china.js'

這里貼一份源碼3d地球攻擊線源碼：

<template>
<!--例子6-->
<div>
<div
class="earthmap"
id="chart_example6"
style="1500px;height:1221px;"
>
</div>
</div>
</template>

<script>
import$from'jquery'
importworldfrom'echarts/map/js/world.js'
importchinafrom'echarts/map/js/china.js'

exportdefault{
data(){
return{}
},
mounted(){
this.initData()
},
methods:{
//繪制圖表
initData(){
//初始化canvas節點
letmyChart=this.$echarts.init(
document.getElementById('chart_example6')
)
//隨機獲取點點坐標函數
letrodamData=function(){
letname='隨機點'+Math.random().toFixed(5)*100000
//終點經度
letlongitude=105.18
//終點緯度
letlatitude=37.51
//起點經度
letlongitude2=Math.random()*360-180
//起點緯度
letlatitude2=Math.random()*180-90
return{
coords:[
[longitude2,latitude2],
[longitude,latitude]
],
value:(Math.random()*3000).toFixed(2)
}
}
//使用世界地圖生成地球皮膚
letcanvas=document.createElement('canvas')
letmyChart2=this.$echarts.init(canvas,null,{
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配置
letoption={
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'
},
globe:{
baseTexture:myChart2,
environment:this.$echarts.graphic.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:{
2
},
data:[],
silent:false
}
]
}
//隨機數據i控制線數量
for(leti=0;i<200;i++){
option.series[0].data=option.series[0].data.concat(rodamData())
}
//畫圖
myChart.setOption(option)
window.addEventListener('resize',function(){
myChart.resize()
})
}
},
watch:{},
created(){}
}
</script>

以上代碼僅供參考，看了echarts官方和w3c的echarts教程慢慢了解很多配置熟悉；
官網：https://www.echartsjs.com/zh/api.html；
w3c：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html
感興趣可以看看；
如果你也是初學echarts又有興趣加入我的項目例子 聯系我 我拉你進項目組，我們共同進步；

總結

以上是生活随笔為你收集整理的Echarts实践-实现3D地球的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。