昨天被拉进一个项目组，会接触一些与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="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, {
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: {
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又有兴趣加入我的项目例子 联系我 我拉你进项目组，我们共同进步；