<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name=”viewport” content=”width=device-width, initial-scale=1″ >
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body style=" height: 100%;width: auto;white-space: nowrap;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" height: 500px;width: auto; white-space: nowrap">
</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var i = 1;
option = {
title: {
text: ''
},
tooltip: {},
animationDurationUpdate: 5000,
animationEasingUpdate: 'quinticInOut',
series : [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: [
{ name: "漏洞"+i,
x: i+00,
y: i+00,
}
],
// links: [],
links: [{
symbolSize: [5, 20],
label: {
normal: {
show: true
}
},
lineStyle: {
normal: {
width: 5,
curveness: 0.2
}
}
}, {
source: '漏洞1',
target: '漏洞2',
label: {
normal: {
show: true
}
},
lineStyle: {
normal: { curveness: 0.2 }
}
}, {
source: '漏洞2',
target: '漏洞1',
label: {
normal: {
show: true
}
},
}, {
source: '业务1',
target: '服务2'
}, {
source: '服务2',
target: '服务1'
}, {
source: '服务1',
target: '漏洞1'
}, {
source: '服务3',
target: '漏洞1'
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/1371/viewspace-3151644/ ，如需转载，请注明出处，否则将追究法律责任。
