拖拽到右边画布后，移动或改变大小组合大屏（仿dataV测试demo）
UI库
(function(global) { global.earth = new Earth({ el: window.CURRENT }); earth.animate = function() { if(earth.rotateTargetX !== undefined && earth.rotateTargetY !== undefined) { earth.rotateVX += (earth.rotateTargetX - earth.rotateX) * 0.012; earth.rotateVY += (earth.rotateTargetY - earth.rotateY) * 0.012; if(Math.abs(earth.rotateTargetX - earth.rotateX) < 0.1 && Math.abs(earth.rotateTargetY - earth.rotateY) < 0.1) { earth.rotateTargetX = undefined; earth.rotateTargetY = undefined; } } earth.rotateX += earth.rotateVX; earth.rotateY += earth.rotateVY; earth.rotateVX *= 0.98; earth.rotateVY *= 0.98; if(earth.dragging || earth.rotateTargetX !== undefined) { earth.rotateVX *= 0.6; earth.rotateVY *= 0.6; } //earth.rotateY += earth.controllers.spin * 0.01; if(earth.rotateX < -earth.rotateXMax){ earth.rotateX = -earth.rotateXMax; earth.rotateVX *= -0.95; } if(earth.rotateX > earth.rotateXMax){ earth.rotateX = earth.rotateXMax; earth.rotateVX *= -0.95; } // TWEEN.update(); earth.rotating.rotation.x = earth.rotateX; earth.rotating.rotation.y = earth.rotateY; //earth.render(); earth.renderer.clear(); earth.renderer.render(earth.scene, earth.camera); requestAnimationFrame(earth.animate); /*if(THREE.SceneUtils && THREE.SceneUtils.traverseHierarchy) { THREE.SceneUtils.traverseHierarchy(earth.rotating, function(mesh) { if(mesh.update !== undefined) { mesh.update(); } }); } else {*/ for(var i = 0; i < earth.linesCache.length; i++) { if(earth.linesCache[i].update !== undefined) { earth.linesCache[i].update(); } } //} for(var i in earth.markers) { earth.markers[i].update() } //if(earth.shaderMaterial) { //earth.shaderMaterial.uniforms.time.value += 1; //} //earth.shaderMaterial.uniforms.time.value += 1; //earth.controls.update(); } })(window); /*var data = {"message":"获取告警地图数据成功","data":[{"attackrout":[{"source":{"latlon":"120.153576,30.287459","name":"浙江-杭州","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.507676,31.752889","name":"安徽-六安","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江-杭州","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"102.712251,25.040609","name":"云南","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"108.948024,34.263161","name":"陕西","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.587245,35.415393","name":"山东-济宁","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江-杭州","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"118.767413,32.041544","name":"江苏","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"126.642464,45.756967","name":"黑龙江-哈尔滨","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江-杭州","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"121.472644,31.231706","name":"上海","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江-杭州","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"118.767413,32.041544","name":"江苏","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"111.670801,40.818311","name":"内蒙古-呼和浩特","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"113.665412,34.757975","name":"河南-郑州","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江-杭州","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"121.472644,31.231706","name":"上海","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"116.507676,31.752889","name":"安徽-六安","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"116.507676,31.752889","name":"安徽-六安","value":"7"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"7"}},{"source":{"latlon":"113.280637,23.125178","name":"广东-广州","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"120.619585,31.299379","name":"江苏-苏州","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"121.472644,31.231706","name":"上海","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"102.712251,25.040609","name":"云南-昆明","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"117.184811,34.261792","name":"江苏-徐州","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"121.472644,31.231706","name":"上海","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"113.280637,23.125178","name":"广东","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"103.823557,36.058039","name":"甘肃","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"120.619585,31.299379","name":"江苏-苏州","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"109.411703,24.314617","name":"广西-柳州","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"112.982279,28.19409","name":"湖南","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"114.298572,30.584355","name":"湖北-武汉","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"118.767413,32.041544","name":"江苏","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"116.587245,35.415393","name":"山东-济宁","value":"3"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"3"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"1"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"1"}},{"source":{"latlon":"120.153576,30.287459","name":"浙江","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}},{"source":{"latlon":"113.852186,27.622946","name":"江西-萍乡","value":"6"},"target":{"latlon":"118.18,32.18","name":"安徽-滁州","value":"6"}}]}],"code":0}; earth.load(data["data"][0]["attackrout"]);*/ //setTimeout(function() { var data = {"message":"获取告警地图数据成功","data":[{"attackrout":[{"source":{"latlon":"120.153576,30.287459","name":"杭州","value":"7"},"target":{"latlon":"1.718190,46.710670","name":"法国","value":"7"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"6"},"target":{"latlon":"135.718933,35.098129","name":"日本","value":"6"}},{"source":{"latlon":"1.718190,46.710670","name":"法国","value":"6"},"target":{"latlon":"120.153576,30.287459","name":"杭州","value":"6"}},{"source":{"latlon":"127.850166,36.448151","name":"韩国","value":"6"},"target":{"latlon":"116.405285,39.904989","name":"北京","value":"6"}},{"source":{"latlon":"1.718190,46.710670","name":"法国","value":"6"},"target":{"latlon":"102.712251,25.040609","name":"昆明","value":"6"}},{"source":{"latlon":"135.718933,35.098129","name":"日本","value":"5"},"target":{"latlon":"1.718190,46.710670","name":"法国","value":"5"}},{"source":{"latlon":"116.507676,31.752889","name":"六安","value":"5"},"target":{"latlon":"120.153576,30.287459","name":"杭州","value":"5"}},{"source":{"latlon":"120.153576,30.287459","name":"杭州","value":"5"},"target":{"latlon":"127.850166,36.448151","name":"韩国","value":"5"}},{"source":{"latlon":"120.153576,30.287459","name":"杭州","value":"5"},"target":{"latlon":"108.830719,59.453751","name":"俄罗斯","value":"5"}},{"source":{"latlon":"109.939776,33.868319","name":"商洛","value":"5"},"target":{"latlon":"120.153576,30.287459","name":"杭州","value":"5"}},{"source":{"latlon":"135.718933,35.098129","name":"日本","value":"5"},"target":{"latlon":"116.405285,39.904989","name":"北京","value":"5"}},{"source":{"latlon":"1.718190,46.710670","name":"法国","value":"5"},"target":{"latlon":"109.939776,33.868319","name":"商洛","value":"5"}},{"source":{"latlon":"116.405285,39.904989","name":"北京","value":"5"},"target":{"latlon":"120.153576,30.287459","name":"杭州","value":"5"}},{"source":{"latlon":"120.153576,30.287459","name":"杭州","value":"5"},"target":{"latlon":"109.939776,33.868319","name":"商洛","value":"5"}},{"source":{"latlon":"1.718190,46.710670","name":"法国","value":"5"},"target":{"latlon":"127.850166,36.448151","name":"韩国","value":"5"}}]}],"code":0}; earth.load([data["data"][0]["attackrout"][0]]); //}, 2000);
(function(global){ let data = [{ source: { name: '加拿大', value: 1 }, target: { name: '北京', value: 6 } }, { source: { name: '法国', value: 3 }, target: { name: '杭州市', value: 2 } }]; var m = new Map(window.CURRENT); m.load(data); })(window);
(function(global){ global.chart = { init: function() { this.refresh(window.CURRENT); }, refresh: function(dom, param) { $.ajax({ type: 'post', url: '/waf/screen/attack/sourcearea', dataType: 'json', data: param, error: d => { var data = {"code":0,"data":[{"name":"http","value":45},{"name":"tcp","value":88},{"name":"udp","value":132},{"name":"https","value":111}],"message":"msg"}; if(data['code'] == 0) { if(!this.pie) { this.pie = echarts.init(dom); } this.pie.setOption(this.getOption(data['data'])); this.animate(data['data'], dom); } } }) }, getOption: function(d){ var legend_data=[]; var legend_type='scroll'; for(var i=0;i<d.length;i++){ legend_data.push(d[i]['name']); } if(screen.width<=1366){ legend_type='scroll'; } else { legend_type='plain'; } return { legend: { type: legend_type, orient: 'horizontal', top: '80%', itemWidth: 10, itemHeight: 10, x: 'center', y: 'top', textStyle: { fontSize: 12, color: '#e4e5e5' }, pageIconColor: '#e4e5e5', pageIconInactiveColor: '#2f4554', pageIconSize: 10, pageTextStyle: { color: '#e4e5e5' }, data: legend_data }, color: ['#49d5d4','#4ab7f1','#3d97cc','#3076a4','#23557d','#b2565c','#3f79c8','#30a7e0','#bfae6a','#b9d6df'], series: { type: 'pie', center: ['50%', '40%'], radius: ['30%', '60%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, rich: { labelValue: { lineHeight: '30', fontSize: '18', fontWeight: 'bold' }, labelName: { fontSize: '14', color: '#e4e5e5' } }, formatter: function(param){ return '{labelValue|'+param.value+'}'+'\n'+'{labelName|'+param.name+'}'; } } }, data: d } } }, animate: function(d,dom) { var self=this; var isMove=true; var i=0; var len=d.length; $('#'+dom).on('mouseover',function(){ isMove=false; self.pie.dispatchAction({ type:'downplay', seriesIndex: 0 }); }); $('#'+dom).on('mouseout',function(){ isMove=true; }); clearInterval(self.time); self.time=setInterval(function(){ if(isMove){ if(i==len){ i=0; } for(var k=0;k<len;k++){ if(k==i){ self.pie.dispatchAction({ type:'highlight', seriesIndex: 0, dataIndex: i }); } else { self.pie.dispatchAction({ type:'downplay', seriesIndex: 0, dataIndex: k }); } } i++; } else { i=0 } },2000); } }; global.chart.init(); })(window);
