金属质感地球echarts effectScatter配置项内容和展示
配置项如下
var psa = [{
name: 'Afghanistan',
value: 28397.812
},
{
name: 'Angola',
value: 19549.124
},
{
name: 'Albania',
value: 3150.143
},
{
name: 'United Arab Emirates',
value: 8441.537
},
{
name: 'Argentina',
value: 40374.224
},
{
name: 'Armenia',
value: 2963.496
},
{
name: 'French Southern and Antarctic Lands',
value: 268.065
},
{
name: 'Australia',
value: 22404.488
},
{
name: 'Austria',
value: 8401.924
},
{
name: 'Azerbaijan',
value: 9094.718
},
{
name: 'Burundi',
value: 9232.753
},
{
name: 'Belgium',
value: 10941.288
},
{
name: 'Benin',
value: 9509.798
},
{
name: 'Burkina Faso',
value: 15540.284
},
{
name: 'Bangladesh',
value: 151125.475
},
{
name: 'Bulgaria',
value: 7389.175
},
{
name: 'The Bahamas',
value: 66402.316
},
{
name: 'Bosnia and Herzegovina',
value: 3845.929
},
{
name: 'Belarus',
value: 9491.07
},
{
name: 'Belize',
value: 308.595
},
{
name: 'Bermuda',
value: 64.951
},
{
name: 'Bolivia',
value: 716.939
},
{
name: 'Brazil',
value: 195210.154
},
{
name: 'Brunei',
value: 27.223
},
{
name: 'Bhutan',
value: 716.939
},
{
name: 'Botswana',
value: 1969.341
},
{
name: 'Central African Republic',
value: 4349.921
},
{
name: 'Canada',
value: 34126.24
},
{
name: 'Switzerland',
value: 7830.534
},
{
name: 'Chile',
value: 17150.76
},
{
name: 'China',
value: 1359821.465
},
{
name: 'Ivory Coast',
value: 60508.978
},
{
name: 'Cameroon',
value: 20624.343
},
{
name: 'Democratic Republic of the Congo',
value: 62191.161
},
{
name: 'Republic of the Congo',
value: 3573.024
},
{
name: 'Colombia',
value: 46444.798
},
{
name: 'Costa Rica',
value: 4669.685
},
{
name: 'Cuba',
value: 11281.768
},
{
name: 'Northern Cyprus',
value: 1.468
},
{
name: 'Cyprus',
value: 1103.685
},
{
name: 'Czech Republic',
value: 10553.701
},
{
name: 'Germany',
value: 83017.404
},
{
name: 'Djibouti',
value: 834.036
},
{
name: 'Denmark',
value: 5550.959
},
{
name: 'Dominican Republic',
value: 10016.797
},
{
name: 'Algeria',
value: 37062.82
},
{
name: 'Ecuador',
value: 15001.072
},
{
name: 'Egypt',
value: 78075.705
},
{
name: 'Eritrea',
value: 5741.159
},
{
name: 'Spain',
value: 46182.038
},
{
name: 'Estonia',
value: 1298.533
},
{
name: 'Ethiopia',
value: 87095.281
},
{
name: 'Finland',
value: 5367.693
},
{
name: 'Fiji',
value: 860.559
},
{
name: 'Falkland Islands',
value: 49.581
},
{
name: 'France',
value: 63230.866
},
{
name: 'Gabon',
value: 1556.222
},
{
name: 'United Kingdom',
value: 62066.35
},
{
name: 'Georgia',
value: 4388.674
},
{
name: 'Ghana',
value: 24262.901
},
{
name: 'Guinea',
value: 10876.033
},
{
name: 'Gambia',
value: 1680.64
},
{
name: 'Guinea Bissau',
value: 10876.033
},
{
name: 'Equatorial Guinea',
value: 696.167
},
{
name: 'Greece',
value: 11109.999
},
{
name: 'Greenland',
value: 56.546
},
{
name: 'Guatemala',
value: 14341.576
},
{
name: 'French Guiana',
value: 231.169
},
{
name: 'Guyana',
value: 786.126
},
{
name: 'Honduras',
value: 7621.204
},
{
name: 'Croatia',
value: 4338.027
},
{
name: 'Haiti',
value: 9896.4
},
{
name: 'Hungary',
value: 10014.633
},
{
name: 'Indonesia',
value: 240676.485
},
{
name: 'India',
value: 1205624.648
},
{
name: 'Ireland',
value: 4467.561
},
{
name: 'Iran',
value: 240676.485
},
{
name: 'Iraq',
value: 30962.38
},
{
name: 'Iceland',
value: 318.042
},
{
name: 'Israel',
value: 7420.368
},
{
name: 'Italy',
value: 60508.978
},
{
name: 'Jamaica',
value: 2741.485
},
{
name: 'Jordan',
value: 6454.554
},
{
name: 'Japan',
value: 127352.833
},
{
name: 'Kazakhstan',
value: 15921.127
},
{
name: 'Kenya',
value: 40909.194
},
{
name: 'Kyrgyzstan',
value: 5334.223
},
{
name: 'Cambodia',
value: 14364.931
},
{
name: 'South Korea',
value: 51452.352
},
{
name: 'Kosovo',
value: 97.743
},
{
name: 'Kuwait',
value: 2991.58
},
{
name: 'Laos',
value: 6395.713
},
{
name: 'Lebanon',
value: 4341.092
},
{
name: 'Liberia',
value: 3957.99
},
{
name: 'Libya',
value: 6040.612
},
{
name: 'Sri Lanka',
value: 20758.779
},
{
name: 'Lesotho',
value: 2008.921
},
{
name: 'Lithuania',
value: 3068.457
},
{
name: 'Luxembourg',
value: 507.885
},
{
name: 'Latvia',
value: 2090.519
},
{
name: 'Morocco',
value: 31642.36
},
{
name: 'Moldova',
value: 103.619
},
{
name: 'Madagascar',
value: 21079.532
},
{
name: 'Mexico',
value: 117886.404
},
{
name: 'Macedonia',
value: 507.885
},
{
name: 'Mali',
value: 13985.961
},
{
name: 'Myanmar',
value: 51931.231
},
{
name: 'Montenegro',
value: 620.078
},
{
name: 'Mongolia',
value: 2712.738
},
{
name: 'Mozambique',
value: 23967.265
},
{
name: 'Mauritania',
value: 3609.42
},
{
name: 'Malawi',
value: 15013.694
},
{
name: 'Malaysia',
value: 28275.835
},
{
name: 'Namibia',
value: 2178.967
},
{
name: 'New Caledonia',
value: 246.379
},
{
name: 'Niger',
value: 15893.746
},
{
name: 'Nigeria',
value: 159707.78
},
{
name: 'Nicaragua',
value: 5822.209
},
{
name: 'Netherlands',
value: 16615.243
},
{
name: 'Norway',
value: 4891.251
},
{
name: 'Nepal',
value: 26846.016
},
{
name: 'New Zealand',
value: 4368.136
},
{
name: 'Oman',
value: 2802.768
},
{
name: 'Pakistan',
value: 173149.306
},
{
name: 'Panama',
value: 3678.128
},
{
name: 'Peru',
value: 29262.83
},
{
name: 'Philippines',
value: 93444.322
},
{
name: 'Papua New Guinea',
value: 6858.945
},
{
name: 'Poland',
value: 38198.754
},
{
name: 'Puerto Rico',
value: 3709.671
},
{
name: 'North Korea',
value: 1.468
},
{
name: 'Portugal',
value: 10589.792
},
{
name: 'Paraguay',
value: 6459.721
},
{
name: 'Qatar',
value: 1749.713
},
{
name: 'Romania',
value: 21861.476
},
{
name: 'Russia',
value: 21861.476
},
{
name: 'Rwanda',
value: 10836.732
},
{
name: 'Western Sahara',
value: 514.648
},
{
name: 'Saudi Arabia',
value: 27258.387
},
{
name: 'Sudan',
value: 35652.002
},
{
name: 'South Sudan',
value: 9940.929
},
{
name: 'Senegal',
value: 12950.564
},
{
name: 'Solomon Islands',
value: 526.447
},
{
name: 'Sierra Leone',
value: 5751.976
},
{
name: 'El Salvador',
value: 6218.195
},
{
name: 'Somaliland',
value: 9636.173
},
{
name: 'Somalia',
value: 9636.173
},
{
name: 'Republic of Serbia',
value: 3573.024
},
{
name: 'Suriname',
value: 524.96
},
{
name: 'Slovakia',
value: 5433.437
},
{
name: 'Slovenia',
value: 2054.232
},
{
name: 'Sweden',
value: 9382.297
},
{
name: 'Swaziland',
value: 1193.148
},
{
name: 'Syria',
value: 7830.534
},
{
name: 'Chad',
value: 11720.781
},
{
name: 'Togo',
value: 6306.014
},
{
name: 'Thailand',
value: 66402.316
},
{
name: 'Tajikistan',
value: 7627.326
},
{
name: 'Turkmenistan',
value: 5041.995
},
{
name: 'East Timor',
value: 10016.797
},
{
name: 'Trinidad and Tobago',
value: 1328.095
},
{
name: 'Tunisia',
value: 10631.83
},
{
name: 'Turkey',
value: 72137.546
},
{
name: 'United Republic of Tanzania',
value: 44973.33
},
{
name: 'Uganda',
value: 33987.213
},
{
name: 'Ukraine',
value: 46050.22
},
{
name: 'Uruguay',
value: 3371.982
},
{
name: 'United States of America',
value: 312247.116
},
{
name: 'Uzbekistan',
value: 27769.27
},
{
name: 'Venezuela',
value: 236.299
},
{
name: 'Vietnam',
value: 89047.397
},
{
name: 'Vanuatu',
value: 236.299
},
{
name: 'West Bank',
value: 13.565
},
{
name: 'Yemen',
value: 22763.008
},
{
name: 'South Africa',
value: 51452.352
},
{
name: 'Zambia',
value: 13216.985
},
{
name: 'Zimbabwe',
value: 13076.978
}
]
/*
图中相关城市经纬度,根据你的需求添加数据
关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
*/
var geoCoordMap = {
'BeiJing': [116.3, 39.9],
'NanNing': [108.479, 23.1152],
'GuangZhou': [113.5107, 23.2196],
'ChongQing': [107.7539, 30.1904],
'Finland': [24.909912, 60.169095],
'USA': [-100.696295, 33.679979],
'Japan': [139.710164, 35.706962],
'Korea': [126.979208, 37.53875],
'Switzerland': [7.445147, 46.956241],
'Southeast Asia': [117.53244, 5.300343],
'Australia': [135.193845, -25.304039],
'Germany': [13.402393, 52.518569],
'UK': [-0.126608, 51.208425],
'Canada': [-102.646409, 59.994255]
};
/*
记录下起点城市和终点城市的名称，以及权重
数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小
*/
var BJData = [
[{
name: 'BeiJing'
}, {
name: "Canada",
value: 80
}],
[{
name: 'BeiJing'
}, {
name: "USA",
value: 100
}],
[{
name: 'BeiJing'
}, {
name: "Australia",
value: 95
}],
[{
name: 'BeiJing'
}, {
name: "Switzerland",
value: 50
}],
[{
name: 'BeiJing'
}, {
name: "Japan",
value: 30
}],
[{
name: 'BeiJing'
}, {
name: "UK",
value: 70
}]
];
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var toCoord = geoCoordMap[dataItem[1].name];
var fromCoord = geoCoordMap[dataItem[0].name];
if (fromCoord && toCoord) {
res.push([fromCoord, toCoord])
}
}
console.log(res)
return res;
}
var series = []; // 3D飞线
var dser = []; // 2D散点坐标
[
['BeiJing', BJData]
].forEach(function(item, i) {
dser.push({
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 0,
rippleEffect: {
brushType: 'stroke'
},
label: {
fontSize: 14,
show: true,
position: 'right',
formatter: '{b}',
color: '#fff'
},
itemStyle: {
normal: {
color: '#fff'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name],
symbolSize: dataItem[1].value / 4
};
})
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 0,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'left',
fontSize: 14,
formatter: '{b}',
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#fff'
}
},
data: [{
name: item[0],
value: geoCoordMap[item[0]],
symbolSize: parseInt(Math.random() * 20 + 10),
label: {
normal: {
position: 'right',
color: '#fff'
}
}
}]
}, {
type: 'map',
map: 'world',
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
],
itemStyle: {
normal: {
areaColor: 'rgba(150,150,150,1)',
},
emphasis: {
areaColor: 'rgba(255,158,44,1)',
label: {
show: true,
textStyle: {
color: '#fff',
fontWeight: 100,
fontSize: 16,
}
}
},
},
data: psa
})
series.push({
type: 'lines3D',
effect: {
show: true,
period: 3, //速度
trailLength: 0.1 //尾部阴影
},
lineStyle: { //航线的视图效果
color: '#9ae5fc',
width: 1,
opacity: 0.6
},
data: convertData(item[1]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
})
});
// 使用 echarts 绘制世界地图的实例作为纹理
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
width: 4096,
height: 2048
});
mapChart.setOption({
backgroundColor: '#000',
visualMap: {
min: 0,
max: 100000,
inRange: {
color: ['rgba(19,57,92,1)', 'rgba(25,78,127,1)', 'rgba(30,98,162,1)', 'rgba(36,124,206,1)', 'rgba(43,153,255,1)']
}
},
geo: {
type: 'map',
map: 'world',
left: 0,
top: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
],
},
series: dser
});
// 指定图表的配置项和数据
option = {
globe: {
baseTexture: mapChart,
displacementTexture: '/asset/get/s/data-1545104240896-CXP5p8FwT.jpg',
heightTexture: '/asset/get/s/data-1545104240896-CXP5p8FwT.jpg',
displacementScale: 0.06,
displacementQuality: 'high',
environment: '/asset/get/s/data-1545104248951-mtfBOvOb9.jpg',
shading: 'realistic',
realisticMaterial: {
roughness: 0.3,
metalness: 0.6
},
postEffect: {
enable: true,
// depthOfField: {
// focalRange: 15,
// enable: true,
// focalDistance: 100
// }
},
temporalSuperSampling: {
enable: true
},
light: {
ambient: {
intensity: 0.1,
color: '#000',
},
main: {
intensity: 0.2,
shadow: false
},
ambientCubemap: {
texture: '/asset/get/s/data-1545104257737-uGSQq3F_8.hdr',
exposure: 1,
diffuseIntensity: 0.2,
specularIntensity: 2
}
},
viewControl: {
autoRotate: false,
damping: 0.9,
minDistance: 100,
},
},
series: series
};
截图如下
