echarts2-网络动态攻击（带涟漪效果）
来源：互联网 发布：linux关闭nagle算法 编辑：程序博客网 时间：2024/05/29 18:12
1.html页面包含添加浮层和在浮层上做动态数据加载和滚动效果
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
/*.div-b{ position:absolute; left:2%; top:65%; width:400px; height:200px;z-index:100}*/
.div-a{
border: 5px solid;
position: absolute;
height: 35%;
width: 17%;
z-index: 1000;
opacity: 0.65;
left:2%;
top:60%;
color: rgba(0,0,0,0.1);
background-color: black;
}
.div-c{
border: 1px solid;
position: absolute;
height: 35%;
width: 24%;
z-index: 1000;
opacity: 0.65;
left:23%;
top:60%;
color: rgba(0,0,0,0.1);
background-color: black;
}
.div-d{
border: 1px solid;
position: absolute;
height: 35%;
width: 18%;
z-index: 1000;
opacity: 0.65;
left:50%;
top:60%;
color: rgba(0,0,0,0.1);
background-color: black;
}
.div-b{
border: 1px solid;
position: absolute;
height: 35%;
width: 27%;
z-index: 1000;
opacity: 0.65;
left:71%;
top:60%;
color: rgba(0,0,0,0.1);
background-color: black;
}
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.block .header, .block .content, .block .footer, .block .toolbar, .block .header.header-default, .block .content.content-default, .block .toolbar.toolbar-default, .block .footer.footer-defaut {
background-color: rgba(0,0,0,0.1);
}
.rt-attack-lista .rt-attack-lista .rt-attack-list li div{
font-size:x-large;
color: #FD0202;
text-shadow: 0 5px 9px #c4b59d, 0px -2px 1px #fff;
font-weight: bold;
letter-spacing: -4px;
text-align: center;
}
/* 攻击排名 */
/* -------------------------滚动显示start----------------------------------- */
.topRec_Lista dl,.maqueea{ width:100%; overflow:hidden; margin:0 auto; color:#7C7C7C;}
.topRec_Lista dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#f29b10;}
.topRec_Lista dl dd:nth-child(1){ width:10%; height:20px; line-height:20px; }
.topRec_Lista dl dd:nth-child(2){ width:40%; height:20px; line-height:20px; }
/* .maqueea{ height:90%;} */
.topRec_Lista ul{ width:100%; height:150px;}
.topRec_Lista li{ width:100%; height:25px; line-height:25px; text-align:center; font-size:12px;color:#2e2e2f;}
.topRec_Lista li div{ float:left;color: red}
.topRec_Lista li div:nth-child(1){ width:10%;}
.topRec_Lista li div:nth-child(2){ width:80%;}
/* -------------------------滚动显示end----------------------------------- */
/* 攻击类型 */
/* -------------------------滚动显示start----------------------------------- */
.topRec_Listc dl,.maqueea{ width:100%; overflow:hidden; margin:0 auto; color:#7C7C7C;}
.topRec_Listc dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#f29b10;}
.topRec_Listc dl dd:nth-child(1){ width:10%; height:20px; line-height:20px; }
.topRec_Listc dl dd:nth-child(2){ width:12%; height:20px; line-height:20px; }
.topRec_Listc dl dd:nth-child(3){ width:28%; height:20px; line-height:20px; }
/* .maqueea{ height:90%;} */
.topRec_Listc ul{ width:100%; height:150px;}
.topRec_Listc li{ width:100%; height:25px; line-height:25px; text-align:center; font-size:12px;color:#2e2e2f;}
.topRec_Listc li div{ float:left;color: red}
.topRec_Listc li div:nth-child(1){ width:10%;}
.topRec_Listc li div:nth-child(2){ width:40%;}
.topRec_Listc li div:nth-child(3){ width:30%;}
/* -------------------------滚动显示end----------------------------------- */
/* 滚动显示攻击信息 */
/* -------------------------滚动显示start----------------------------------- */
.topRec_List dl,.maquee{ width:100%; overflow:hidden; margin:0 auto; color:#7C7C7C;}
.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#f29b10;}
.topRec_List dl dd:nth-child(1){ width:22%; height:20px; line-height:20px; }
.topRec_List dl dd:nth-child(2){ width:22%; height:20px; line-height:20px; }
.topRec_List dl dd:nth-child(3){ width:15%; height:20px; line-height:15px; }
/* .maquee{ height:90%;} */
.topRec_List ul{ width:100%; height:150px;}
.topRec_List li{ width:100%; height:25px; line-height:25px; text-align:center; font-size:12px;color:#2e2e2f;}
.topRec_List li div{ float:left;color: red}
.topRec_List li div:nth-child(1){ width:22%;}
.topRec_List li div:nth-child(2){ width:48%;}
.topRec_List li div:nth-child(3){ width:16%;}
/* -------------------------滚动显示end----------------------------------- */
/* 攻击排名 */
/* -------------------------滚动显示start----------------------------------- */
li{ list-style:none }
.topRec_Listd dl,.maqueed{ width:100%; overflow:hidden; margin:0 auto; color:#7C7C7C;}
.topRec_Listd dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#f29b10;}
.topRec_Listd dl dd:nth-child(1){ width:10%; height:20px; line-height:20px; }
.topRec_Listd dl dd:nth-child(2){ width:40%; height:20px; line-height:20px; }
/* .maqueed{ height:90%;} */
.topRec_Listd ul{ width:100%; height:150px;}
.topRec_Listd li{ width:100%; height:25px; line-height:25px; text-align:center; font-size:12px;color:#2e2e2f;}
.topRec_Listd li div{ float:left;color: red}
.topRec_Listd li div:nth-child(1){ width:10%;}
.topRec_Listd li div:nth-child(2){ width:80%;}
/* -------------------------滚动显示end----------------------------------- */
.contents{
position: relative;
left:-12%;
top:60%;
color: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="mainMap" style="height:625px"></div>
<div class="div-a">
<ul>
<li id="attack1" class="block flex-content" left="0.2%" data-row="4" data-col="1" data-sizex="2" data-sizey="2" style="overflow: hidden;">
<div class="contents" style="overflow: hidden;">
<div id="rt-attacka">
<div class="topRec_Lista">
<dl>
<dd>#</dd>
<dd>origin city</dd>
</dl>
<div class="maqueea">
<ul id="rt-attack-lista">
<li>
<div>10</div>
<div>北京</div>
</li>
<li>
<div>8</div>
<div>上海</div>
</li>
<li>
<div>5</div>
<div>深圳</div>
</li>
<li>
<div>3</div>
<div>武汉</div>
</li>
<li>
<div>3</div>
<div>西安</div>
</li>
<li>
<div>3</div>
<div>杭州</div>
</li>
<li>
<div>1</div>
<div>成都</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="div-c">
<ul>
<li id="attack1" class="block flex-content" left="0.2%" data-row="4" data-col="1" data-sizex="2" data-sizey="2" style="overflow: hidden;">
<div class="contents" style="overflow: hidden;">
<div id="rt-attackc">
<div class="topRec_Listc">
<dl>
<dd>#</dd>
<dd>port</dd>
<dd>攻击类型</dd>
</dl>
<div class="maqueea">
<ul id="rt-attack-listc">
<li>
<div>10</div>
<div>445</div>
<div>smtp</div>
</li>
<li>
<div>8</div>
<div>88</div>
<div>telnet</div>
</li>
<li>
<div>5</div>
<div>512</div>
<div>http-alt</div>
</li>
<li>
<div>3</div>
<div>3301</div>
<div>netis-router</div>
</li>
<li>
<div>3</div>
<div>3380</div>
<div>rfb</div>
</li>
<li>
<div>3</div>
<div>8808</div>
<div>ntp</div>
</li>
<li>
<div>1</div>
<div>9090</div>
<div>dnf</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="div-b">
<ul>
<!-- 攻击地图 -->
<li id="attack" class="block flex-content" left="0.2%" data-row="4" data-col="1" data-sizex="2" data-sizey="2" style="overflow: hidden;">
<div class="contents" style="overflow: hidden;">
<div id="rt-attack">
<div class="topRec_List">
<dl>
<dd>攻击来源</dd>
<dd>攻击类型</dd>
<dd>端口号</dd>
</dl>
<div class="maquee">
<ul id="rt-attack-list">
<li>
<div>192.188.87.208</div>
<div>192.188.32.44</div>
<div>80</div>
</li>
<li>
<div>19.168.10.30</div>
<div>192.188.32.44</div>
<div>0</div>
</li>
<li>
<div>19.168.10.30</div>
<div>192.188.32.44</div>
<div>0</div>
</li>
<li>
<div>192.188.87.208</div>
<div>192.188.32.44</div>
<div>80</div>
</li>
<li>
<div>192.188.87.208</div>
<div>192.188.32.44</div>
<div>80</div>
</li>
<li>
<div>19.168.10.30</div>
<div>192.188.32.44</div>
<div>0</div>
</li>
<li>
<div>19.168.10.30</div>
<div>192.188.32.44</div>
<div>0</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="div-d">
<ul>
<!-- 攻击地图 -->
<li id="attackd" class="block flex-content" left="0.2%" data-row="4" data-col="1" data-sizex="2" data-sizey="2" style="overflow: hidden;">
<div class="contents" style="overflow: hidden;">
<div id="rt-attackd">
<div class="topRec_Listd">
<dl>
<dd>#</dd>
<dd>attack city</dd>
</dl>
<div class="maqueed">
<ul id="rt-attack-listd">
<li>
<div>10</div>
<div>北京</div>
</li>
<li>
<div>8</div>
<div>上海</div>
</li>
<li>
<div>5</div>
<div>深圳</div>
</li>
<li>
<div>3</div>
<div>武汉</div>
</li>
<li>
<div>3</div>
<div>西安</div>
</li>
<li>
<div>3</div>
<div>杭州</div>
</li>
<li>
<div>1</div>
<div>成都</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="build/dist/jquery.js"></script>
<script type="text/javascript" src="build/dist/echarts.js"></script>
<script type="text/javascript" src="build/dist/index.js"></script>
</body>
</html>
js模块：地图攻击效果
//var echarts;
require.config({
paths:{
echarts: '../build/dist'
}
});
require(
[
//这里的'echarts'相当于'./js'
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/chord',
'echarts/chart/map',
'echarts/chart/gauge',
'echarts/chart/funnel',
'echarts/chart/venn',
'echarts/chart/treemap',
'echarts/chart/tree',
'echarts/chart/eventRiver'
],
//创建ECharts图表方法
function (ec) {
// --- 地图 ---
//基于准备好的dom,初始化echart图表
var myChart = ec.init(document.getElementById('mainMap'));
//定义图表option
var option = {
backgroundColor: '#002F47',
dataRange: {
show:false,
min : 0,
max : 95,
calculable : true,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
textStyle:{
color:'#fff'
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
/* name: '全国',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
scaleLimit:{
min:0.4,
max:8
},
mapType: 'china',*/
name: '全国',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
scaleLimit:{
min:0.4,
max:8
},
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#1b1b1b'
}
}
},
data:[
/*{name: '北京',value: Math.round(Math.random()*100)},
{name: '天津',value: Math.round(Math.random()*100)},
{name: '上海',value: Math.round(Math.random()*100)},
{name: '重庆',value: Math.round(Math.random()*100)},
{name: '河北',value: Math.round(Math.random()*100)},
{name: '河南',value: Math.round(Math.random()*100)},
{name: '云南',value: Math.round(Math.random()*100)},
{name: '辽宁',value: Math.round(Math.random()*100)},
{name: '黑龙江',value: Math.round(Math.random()*100)},
{name: '湖南',value: Math.round(Math.random()*100)},
{name: '安徽',value: Math.round(Math.random()*100)},
{name: '山东',value: Math.round(Math.random()*100)},
{name: '新疆',value: Math.round(Math.random()*100)},
{name: '江苏',value: Math.round(Math.random()*100)},
{name: '浙江',value: Math.round(Math.random()*100)},
{name: '江西',value: Math.round(Math.random()*100)},
{name: '湖北',value: Math.round(Math.random()*100)},
{name: '广西',value: Math.round(Math.random()*100)},
{name: '甘肃',value: Math.round(Math.random()*100)},
{name: '山西',value: Math.round(Math.random()*100)},
{name: '内蒙古',value: Math.round(Math.random()*100)},
{name: '陕西',value: Math.round(Math.random()*100)},
{name: '吉林',value: Math.round(Math.random()*100)},
{name: '福建',value: Math.round(Math.random()*100)},
{name: '贵州',value: Math.round(Math.random()*100)},
{name: '广东',value: Math.round(Math.random()*100)},
{name: '青海',value: Math.round(Math.random()*100)},
{name: '西藏',value: Math.round(Math.random()*100)},
{name: '四川',value: Math.round(Math.random()*100)},
{name: '宁夏',value: Math.round(Math.random()*100)},
{name: '海南',value: Math.round(Math.random()*100)},
{name: '台湾',value: Math.round(Math.random()*100)},
{name: '香港',value: Math.round(Math.random()*100)},
{name: '澳门',value: Math.round(Math.random()*100)}*/
],
/*markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
//color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
],
},*/
geoCoord: {
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
'东营': [118.7073,37.5513],
'中山': [113.4229,22.478],
'临汾': [111.4783,36.1615],
'临沂': [118.3118,35.2936],
'丹东': [124.541,40.4242],
'丽水': [119.5642,28.1854],
'乌鲁木齐': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'兰州': [103.5901,36.3043],
'包头': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南宁': [108.479,23.1152],
'南昌': [116.0046,28.6633],
'南通': [121.1023,32.1625],
'厦门': [118.1689,24.6478],
'台州': [121.1353,28.6688],
'合肥': [117.29,32.0581],
'呼和浩特': [111.4124,40.4901],
'咸阳': [108.4131,34.8706],
'哈尔滨': [127.9688,45.368],
'唐山': [118.4766,39.6826],
'嘉兴': [120.9155,30.6354],
'大同': [113.7854,39.8035],
'大连': [122.2229,39.4409],
'天津': [117.4219,39.4189],
'太原': [112.3352,37.9413],
'威海': [121.9482,37.1393],
'宁波': [121.5967,29.6466],
'宝鸡': [107.1826,34.3433],
'宿迁': [118.5535,33.7775],
'常州': [119.4543,31.5582],
'广州': [113.5107,23.2196],
'廊坊': [116.521,39.0509],
'延安': [109.1052,36.4252],
'张家口': [115.1477,40.8527],
'徐州': [117.5208,34.3268],
'德州': [116.6858,37.2107],
'惠州': [114.6204,23.1647],
'成都': [103.9526,30.7617],
'扬州': [119.4653,32.8162],
'承德': [117.5757,41.4075],
'拉萨': [91.1865,30.1465],
'无锡': [120.3442,31.5527],
'日照': [119.2786,35.5023],
'昆明': [102.9199,25.4663],
'杭州': [119.5313,29.8773],
'枣庄': [117.323,34.8926],
'柳州': [109.3799,24.9774],
'株洲': [113.5327,27.0319],
'武汉': [114.3896,30.6628],
'汕头': [117.1692,23.3405],
'江门': [112.6318,22.1484],
'沈阳': [123.1238,42.1216],
'沧州': [116.8286,38.2104],
'河源': [114.917,23.9722],
'泉州': [118.3228,25.1147],
'泰安': [117.0264,36.0516],
'泰州': [120.0586,32.5525],
'韶关': [113.7964,24.7028]
}
},
{
name: '上海 Top10',
type: 'map',
mapType: 'china',
data:[],
markLine : {
smooth:false,
symbol: ['circle', 'circle'],
effect : {
type:'',
show: true,
scaleSize: 1,
period: 5,
color: 'red',
shadowBlur: 10
},
itemStyle : {
show:false,
normal: {
borderWidth:0,
lineStyle: {
color: 'rgba(0,0,0,0)',
type: '',
width: 4
}
}
},
label:{
show:false
},
data : [
[{name:'上海'},{name:'包头',value:95}],
[{name:'广州'},{name:'成都',value:50}],
[{name:'广州'},{name:'常州',value:40}],
[{name:'广州'},{name:'北京',value:30}],
[{name:'上海'},{name:'大连',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
},
effect : {
show: true,
//color:'red',
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'包头',value:95},
{name:'成都',value:50},
{name:'常州',value:40},
{name:'北京',value:30},
{name:'大连',value:10}
]
}
}
]
};
//为echarts对象加载数据
myChart.setOption(option);
/*setInterval(function(){
var json='{"rtAttacks":[{desIP:"192.132.34.22",attackType:"smtp",port:20},{desIP:"192.132.34.22",attackType:"ftp",port:40},{desIP:"192.132.34.22",attackType:"smtp",port:40},{desIP:"192.132.34.22",attackType:"ftp",port:40},{desIP:"192.132.34.22",attackType:"dns",port:40},{desIP:"192.132.34.22",attackType:"smtp",port:40},{desIP:"192.132.34.22",attackType:"smtp",port:40}]}';
//alert(json)
var jsondata =eval("("+json+")");
//alert(jsondata.rtAttacks.length);
//var jsondata = eval(json);
if(jsondata){
var tempHtml = '';
for(var i=0;i<jsondata.rtAttacks.length;i++){
var tempObj = jsondata.rtAttacks[i];
//alert("ip:"+tempObj.desIP)
if(tempObj.attackType=="smtp"){
tempHtml += '<li><div>'+tempObj.desIP+'</div><div style="color:green;">'+tempObj.attackType+'</div><div>'+tempObj.port+'</div></li>';
}else if(tempObj.attackType=="ftp"){
tempHtml += '<li><div>'+tempObj.desIP+'</div><div style="color:blue;">'+tempObj.attackType+'</div><div>'+tempObj.port+'</div></li>';
}else{
tempHtml += '<li><div>'+tempObj.desIP+'</div><div>'+tempObj.attackType+'</div><div>'+tempObj.port+'</div></li>';
}
}
//alert(tempHtml);
$("#rt-attack-list").html(tempHtml);
} */
/*if(jsondata){
var tempHtml = '';
for(var i=0;i<jsondata.top5attack.length;i++){
var ranknum = i+1;
var tempObj = jsondata.top5attack[i];
tempHtml += '<li><div>'+ranknum+'</div><div>'+tempObj.srcIp+'</div><div>'+tempObj.attackTimes+'</div><div>'+tempObj.srcArea+'</div></li>';
}
$("#attack-rankTop5").html(tempHtml);
}*/
/*$(".maquee").find("ul").animate({
marginTop : "-25px"
}, 500, function() {
$(this).css({
marginTop : "0px"
}).find("li:first").appendTo(this);
});*/
//}, 100);
}
);
- echarts2-网络动态攻击（带涟漪效果）
- CSS3 涟漪效果
- Shader水涟漪效果
- android的多点触摸（制作水波涟漪效果）
- as3.0 代码实现水涟漪（波纹）效果
- 鼠标点击的涟漪效果（unity&shader）
- echarts2.2.7动态数据填充
- CSS3做涟漪的效果
- RippleView水波纹，涟漪效果
- Material Design动画：涟漪效果
- button 点击的涟漪效果
- 自定义点击产生涟漪效果
- 【Echarts】Echarts2.0动态加载扇形图。
- 【Echarts】Echarts2.0动态加载柱状图~
- 涟漪
- 涟漪
- Android实战简易教程-第四十四枪（Ripple Effect-为控件增加涟漪效果）
- Android实战简易教程<四十四>（Ripple Effect-为控件增加涟漪效果）
- GitChat · 运维 | 深入了解 Azure 云平台容器技术服务
- Elasticsearch之elasticsearch5.x 新特性
- 跳转语句，如果是pc访问就127.0.0.1
- 【Audio】耳机错误/频繁插入造成的无法识别
- 博客园 首页 新随笔 联系 订阅 管理 Ubuntu 16.04搭建LAMP开发环境 1. 配置网络环境 略 2. 设置ROOT密码 sud
- echarts2-网络动态攻击（带涟漪效果）
- 经验分享 | 【PDF下载】大数据峰会之MaxCompute数据上云与生态
- Android使用共享元素实现转场动画 错误：Unable to create layer for LinearLayout
- [转] 如何把书上的字弄到电脑上
- 在编译期，获得函数参数个数
- YARN ResourceManager调度器的分析
- 网络广告投放基础，广告
- JSP的内置对象
- RHEL linux7.3 安装Apache服务
