echarts实现三维地球数据箭头流动效果代码
代码语言:html
所属分类:三维
代码描述:echarts实现三维地球数据箭头流动效果代码,可用于展示全球数据流动图表展示。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ height: 100%; width: 100%; position: absolute; padding: 0; margin: 0; font-size: 0; } </style> </head> <body> <canvas id="myCanvas" width="5400" height="2700" style="border:1px solid #d3d3d3;display: none;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <div id="earth" style="width: 100%; height: 100%"></div> <script> </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-gl.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/world.js"></script> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); var img = new Image(); img.crossOrigin = ''; img.onload = function () { ctx.drawImage(img, 0, 0); ctx.getImageData(0, 0, this.width, this.height); var dom = document.getElementById("earth") var myChart = echarts.init(dom); let routes = [ [ [128.112931,36.891701], [116.23128,40.22077] ], [ [126.567558,39.845796], [116.23128,40.22077] ], [ [-8.170853,39.047001], [116.23128,40.22077] ], [ [140.255147,37.480499], [116.23128,40.22077] ], [ [104.785158,47.470235], [116.23128,40.22077] ], [ [103.092607,31.072348], [116.23128,40.22077] ], [ [121.710671,31.262193], [116.23128,40.22077] ], [ [114.057396,22.703065], [116.23128,40.22077] ], [ [-76.759367,40.410698], [116.23128,40.22077] ], [ [55.114152,62.855883], [116.23128,40.22077] ], [ [-1.255165,53.864444], [116.23128,40.22077] ], [ [12.72678,43.163893], [116.23128,40.22077] ], [ [21.704661,39.504587], [116.23128,40.22077] ], [ [-49.088137,-1.934768], [116.23128,40.22077] ], [ [-65.866472,-29.297449], [116.23128,40.22077] ], [ [-101.777995,58.302463], [116.23128,40.22077] ], [ [135.033705,-18.493671], [116.23128,40.22077] ], [ [70.27522,29.153033], [116.23128,40.22077] ], [ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0