安装
从npm中获取
npm install echarts --save
npm install echarts-gl --save
复制代码
注意:如果echarts版本在5.0以下,请安装echarts-gl2.0以下版本,否则可能会报错(not Found echarts/lib/label/labelStyle)
引入
const echarts = require("echarts/lib/echarts");
require('echarts-gl');
复制代码
用法
html:
<div id="globe"></div>
复制代码
准备一张地球的贴图,类似这样:
js:
var chartDom = document.getElementById('globe');
var myChart = echarts.init(chartDom);
myChart.setOption({
backgroundColor: '#000',//背景颜色
globe: {
baseTexture: url,//地球的纹理。支持图片路径的字符串,图片或者 Canvas 的对象
heightTexture:url,//地球的高度纹理
shading: 'lambert',//地球中三维图形的着色效果
light: {
ambient: {
intensity: 0.2,//环境光源强度
},//环境光
main: {
intensity: 0.8//光源强度
}//主光源
},//光照设置
},
series: {
type: 'lines3D',
coordinateSystem: 'globe',
blendMode: 'source-over',
effect:{
show:true,
},
lineStyle: {
width: 1,
color: 'rgb(255, 255,255)',
opacity: 1,
trailWidth:4,
trailLength:0.01,
},//3D飞线图
data:[
[
[112, 40, 2], // 终点的经纬度和海拔坐标
[120, 20, 1], // 起点的经纬度和海拔坐标
] ,
[
[112, 40, 2],
[20, -40, 1],
] ,
[
[112, 40, 2],
[-60, 60, 1],
] ,
[
[112, 40, 2],
[40, 0, 1],
] ,
[
[112, 40, 2],
[-20, 20, 1],
] ,
[
[112, 40, 2],
[-39, -40, 1],
] ,
[
[112, 40, 2],
[67, 43, 1],
] ,
[
[112, 40, 2],
[160, -18, 1],
] ,
[
[112, 40, 2],
[145, 66, 1],
] ,
[
[112, 40, 2],
[1790, 42, 1],
] ,
]
}
});
});
option && myChart.setOption(option);
复制代码
地球更多设置参考官方文档:globe
3D射线更多设置参考官方文档:lines3D atmosphere
效果
总结
- 地球的样式取决于皮肤,也就是
baseTexture
和heightTexture
; - 如果周围设置星云效果,设置
layers
; - 实时攻击的线路在
series
,data
中设置起点和终点的经纬度; - 各种光效光晕在
light
- 外发光效果在
atmosphere
atmosphere: {
show: true,
offset: 0.5,
color: "rgba(255,255,255,0.2)",
glowPower: 2,
innerGlowPower: 1.5,
},
复制代码