g2曲线图 每条曲线有单独的选中效果和tooltip

::-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);

});