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