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],
[11.........完整代码请登录后点击上方下载按钮下载查看
网友评论0