昨天被拉進一個項目組，會接觸一些與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"
style="width:1500px;height:1221px;"
>
</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(
document.getElementById('chart_example6')
)
//隨機獲取點點坐標函數
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 = document.createElement('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'
},
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: {
width: 2
},
data: [],
silent: false
}
]
}
// 隨機數據 i控制線數量
for (let i = 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#echarts；
w3c： https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html
w3c： https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html
感興趣可以看看；
如果你也是初學echarts又有興趣加入我的項目例子 聯系我 我拉你進項目組，我們共同進步；