::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
height: 100%;
margin: 0;
}
.m-cf-lines {
margin: 100px 390px 0 420px;
height: 100px;
}
/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight;
var data = [];
let country = ['a', 'b', 'c', 'd'];
for (var i = 0; i < 12; i++) {
for (let j = 0; j < 4; j++) {
var temp = {};
temp.name = '资产名称' + i + j;
temp.time = j;
temp.country = country[i % 4] + i;
if (j === 0) {
temp.value = Math.floor(Math.random() * 20 + 20 * ( 3 - i % 4));
} else {
temp.value = Math.floor(Math.random() * 50 + 20);
}
data.push(temp);
}
}
var valueMap = {};
var chart = new G2.Chart({
container: 'm-cf-lines',
forceFit: true,
padding: [5],
width: window.innerWidth - 810,
height: 100,
animate: false
});
chart.source(data);
chart.legend(false);
chart.axis('value', {
label: null
});
chart.axis('time', {
label:null,
tickLine: null
});
var color = ['#825738', '#60714B', '#41677F', '#4A4168'];
chart.line().position('time*value').size(2).color('country', (type) => { // 通过回调函数
if (type.indexOf('a') >=0 ) {
return color[0];
}
if (type.indexOf('b') >=0 ) {
return color[1];
}
if (type.indexOf('c') >=0 ) {
return color[2];
}
if (type.indexOf('d') >=0 ) {
return color[3];
}
return 'blue';
}).shape('smooth');
chart.tooltip(false);
chart.render();
let tooltipHtml = `
`;$('#m-cf-lines div').append(tooltipHtml);
chart.on('line:mousemove', ev => {
let name = ev.data[0]._origin.name;
let attack = ev.data[1]._origin.value;
let bug = ev.data[2]._origin.value;
let risk = ev.data[3]._origin.value;
let text = name + '攻击面:' + attack + '漏洞:' + bug + '风险:' + risk;
console.log(text);
setTimeout(() => {
$('#m-cf-tooltip').css({visibility: 'visible',left: ev.x + 10, top: ev.y + 10}).show().html(text);
}, 0);
ev.target._attrs.lineWidth = 5;
var color = ['#DB8548', '#98B96D', '#5AA8D8', '#373781'];
let activeColor;
let type = ev.data[0]._origin.country;
if (type.indexOf('a') >=0 ) {
activeColor = color[0];
}
if (type.indexOf('b') >=0 ) {
activeColor = color[1];
}
if (type.indexOf('c') >=0 ) {
activeColor = color[2];
}
if (type.indexOf('d') >=0 ) {
activeColor = color[3];
}
ev.target._attrs.stroke = activeColor;
ev.target._attrs.strokeStyle = activeColor;
});
chart.on('line:mouseleave', ev => {
chart.render();
setTimeout(() => {
$('#m-cf-tooltip').hide();
}, 0);
});
相关链接
发表评论