简介
echarts中的三维地球，需要用到世界地图json数据，我把json文件放到我的资源中，有需要的自行下载。
安装插件
javascript
// 安装echats
npm install echarts --save
npm install echarts-gl --save项目中引用
1，引入安装的echarts插件
javascript
import * as echarts from 'echarts';
import 'echarts-gl';2，引入世界地图json文件
javascript
import WorldJSON from './world.json'3，echarts 注册世界地图
javascript
//注册世界地图
echarts.registerMap('world', WorldJSON);绘制3d地球代码
javascript
// 绘制3d echarts图表
function draw3Dcharts() {
let myChart = echarts.init(map.value);
let geoCoordMap = {
"海门": [121.15, 31.89],
"鄂尔多斯": [109.781327, 39.608266],
"菏泽": [115.480656, 35.23375],
"合肥": [117.27, 31.86],
"武汉": [114.31, 30.52],
"大庆": [125.03, 46.58]
};
var alirl = [
[[121.15, 31.89], [121.48, 31.22]],
[[120.38, 37.35], [121.48, 31.22]],
[[123.97, 47.33], [121.48, 31.22]],
[[118.87, 42.28], [121.48, 31.22]],
[[121.52, 36.89], [121.48, 31.22]],
[[102.18, 38.52], [121.48, 31.22]],
[[118.58, 24.93], [121.48, 31.22]],
[[120.53, 36.86], [121.48, 31.22]],
[[119.46, 35.42], [121.48, 31.22]],
[[119.97, 35.88], [121.48, 31.22]],
[[121.05, 32.08], [121.48, 31.22]],
[[ 91.11, 29.97], [121.48, 31.22]]
]
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var baseTexture = null
// 生成球面纹理
function getBaseTexture() {
let canvas = document.createElement('canvas');
baseTexture = echarts.init(canvas, null , {
width: 4096,
height: 2048,
});
baseTexture.setOption({
backgroundColor: '#001213',
series: [
{
type: 'map',
map: 'world',
left: 0,
top: 0,
right: 0,
bottom: 0,
roam:true,
boundingCoords: [
[-180, 90],
[180, -90],
],
label: {
show: false,
color: '#fff',
fontSize: 20,
},
itemStyle: {
areaColor: '#004444',
borderColor: '#00cccc',
borderWidth: 2,
},
},
],
});
drawEarth();
}
function drawEarth() {
let option = {
tooltip: {
show: true,
},
globe: {
silent: true,
shading: 'color',
environment: '#000',
baseTexture: baseTexture,
viewControl: {
rotateSensitivity: 3, //鼠标旋转灵敏度，设置为0后无法旋转。
zoomSensitivity: 0,//鼠标缩放灵敏度
autoRotate: true,//自动旋转
autoRotateAfterStill: 1,//鼠标停止后多久恢复旋转(为0时暂停后不恢复旋转)
//alpha:160,//视角绕 x 轴，即上下旋转的角度
//beta:-20,//视角绕 y 轴，即左右旋转的角度。
// targetCoord: [75.508268, 18.247872] //定位到哪里
// 定位到北京
targetCoord: [116.46, 39.92],
}
},
series: [
//柱状图
{
type: "bar3D",
coordinateSystem: 'globe',
barSize: 0.5, //柱子粗细
shading: 'lambert',
opacity: 1,
bevelSize: 0.2,
itemStyle: {
color: '#EBE806',
opacity: 0.1
},
label: {
show: false,
formatter: '{b}'
},
data: convertData([
{
name: "海门",
value: (Math.random() * 300).toFixed(2)
}, {
name: "鄂尔多斯",
value: (Math.random() * 300).toFixed(2)
}, {
name: "招远",
value: (Math.random() * 300).toFixed(2)
}, {
name: "舟山",
value: (Math.random() * 300).toFixed(2)
}, {
name: "齐齐哈尔",
value: (Math.random() * 300).toFixed(2)
}, {
name: "盐城",
value: (Math.random() * 300).toFixed(2)
}, {
name: "赤峰",
value: (Math.random() * 300).toFixed(2)
}
]),
},
{
name: 'lines3D',
type: 'lines3D',
coordinateSystem: 'globe',
effect: {
show: true,
period: 2,
trailWidth: 3,
trailLength: 0.5,
trailOpacity: 1,
trailColor: '#0087f4'
},
blendMode: 'lighter',
lineStyle: {
// width: 2
width: 1,
color: '#0087f4',
opacity: 0
},
data: [],
silent: false,
},
{
type: 'lines3D',
coordinateSystem: 'globe',
effect: {
show: true,
trailWidth: 5,
trailOpacity: 1,
trailLength: 0.2,
constantSpeed: 5
},
blendMode: 'lighter',
lineStyle: { //航线的视图效果
color: '#EBE806',
width: 1,
opacity: 1
},
data: alirl
}
]
};
for (let i = 0; i < 50; i++) {
option.series[1].data = option.series[1].data.concat(rodamData())
}
myChart.clear();
myChart.setOption(option, true);
window.addEventListener('resize', () => {
myChart.resize();
});
}
function rodamData() {
let longitude = 105.18
let longitude2 = Math.random() * 360 - 180
let latitude = 37.51
let latitude2 = Math.random() * 180 - 90
return {
coords: [
[longitude2, latitude2],
[longitude, latitude]
],
value: (Math.random() * 3000).toFixed(2)
}
}
getBaseTexture();
}效果图展示
