echarts 3D 透明地球

需求

3D earth 透明度效果 坐標(biāo)數(shù)據(jù)的漣漪擴(kuò)散效果

效果圖

第三方插件

<script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts-gl.min.js"></script> <script type="text/javascript" src="js/world.js"></script>

這個(gè)插件在echarts官網(wǎng)都有，直接下載就可以了，傳送門

html

<div id="container" style="height:100%;box-sizing: border-box;"></div>

css

body{background:url('img/bg12.png');background-size: cover;height: 100%;}

數(shù)據(jù)處理

/*圖中相關(guān)城市經(jīng)緯度,根據(jù)你的需求添加數(shù)據(jù)關(guān)于國(guó)家的經(jīng)緯度，可以用首都的經(jīng)緯度或者其他城市的經(jīng)緯度*/var geoCoordMap = {'南寧': [108.479, 23.1152],'廣州': [113.5107, 23.2196],'重慶': [107.7539, 30.1904],'芬蘭': [24.909912, 60.169095], '美國(guó)': [-100.696295, 33.679979], '日本': [139.710164, 35.706962], '韓國(guó)': [126.979208, 37.53875], '瑞士': [7.445147, 46.956241],'東南亞': [117.53244, 5.300343], '澳大利亞': [135.193845, -25.304039], '德國(guó)': [13.402393, 52.518569], '英國(guó)': [-0.126608, 51.208425], '加拿大': [-102.646409, 59.994255]};/* 記錄下起點(diǎn)城市和終點(diǎn)城市的名稱，以及權(quán)重?cái)?shù)組第一位為終點(diǎn)城市，數(shù)組第二位為起點(diǎn)城市，以及該城市的權(quán)重，就是圖上圓圈的大小*/var CQData = [[{name: '重慶'}, {name: "英國(guó)",value: 70}]];var GZData = [[{name: '廣州'}, {name: "日本",value: 30}],];var NNData = [[{name: '南寧'}, {name: "加拿大",value: 80}],[{name: '南寧'}, {name: "美國(guó)",value: 100}],[{name: '南寧'}, {name: "澳大利亞",value: 95}],[{name: '南寧'}, {name: "瑞士",value: 50}]];var convertData = function(data) {var res = []; for(var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[1].name];var toCoord = geoCoordMap[dataItem[0].name];if(fromCoord && toCoord) {res.push([fromCoord, toCoord])}}console.log(res)return res;}var series = [];// 3D飛線var dser = []; // 2D散點(diǎn)坐標(biāo)[['重慶', CQData],['廣州', GZData],['南寧', NNData]].forEach(function(item, i) {dser.push({ type: 'effectScatter', coordinateSystem: 'geo', zlevel: 3,rippleEffect: {brushType: 'stroke' },label: {fontSize:24, show: true,position: 'right', formatter: '' },itemStyle: {normal: {color: '#f5f802'}},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: 3,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'left',fontSize:18,formatter: ''}},itemStyle: {normal: {color: '#ff0000'}},data: [{name: item[0],value: geoCoordMap[item[0]],symbolSize:parseInt(Math.random()*20+10),label: {normal: {position: 'right'}}}]})series.push({type: 'lines3D',effect: {show: true,period: 3,//速度trailLength: 0.1//尾部陰影 },lineStyle: {//航線的視圖效果color: '#9ae5fc',width: 1,opacity: 0.6},data: convertData(item[1])// 特效的起始、終點(diǎn)位置，一個(gè)二維數(shù)組，相當(dāng)于coords: convertData(item[1])})});

地球的皮膚

var canvas = document.createElement('canvas');var myChart = echarts.init(canvas, null, {width: 4096,height: 2048});myChart.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:dser});

3D地球

var option = {backgroundColor: 'rgba(0,0,0,0)',//canvas的背景顏色globe: {baseTexture:myChart,top: 'middle',left: 'center',displacementScale: 0,environment:'none',shading: 'color',viewControl: {distance:240,autoRotate: true}},series:series};echarts.init(document.getElementById("container")).setOption(option, true);

這樣一款3D實(shí)時(shí)攻擊的效果就出來了 后期把數(shù)據(jù)替換為后臺(tái)數(shù)據(jù)就OK了

總結(jié)

以上是生活随笔為你收集整理的echarts 3D earth实时攻击 线路图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。