mirror of https://github.com/ColorlibHQ/gentelella
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
3.3 KiB
93 lines
3.3 KiB
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="esl.js"></script> |
|
<script src="config.js"></script> |
|
<script src="lib/jquery.min.js"></script> |
|
<script src="lib/dat.gui.min.js"></script> |
|
</head> |
|
<body> |
|
<style> |
|
html, body, #main { |
|
width: 100%; |
|
height: 100%; |
|
margin: 0; |
|
} |
|
</style> |
|
<div id="main"></div> |
|
<script> |
|
|
|
require([ |
|
'echarts', |
|
|
|
'extension/dataTool/gexf', |
|
|
|
'echarts/chart/graph', |
|
|
|
'echarts/component/title', |
|
'echarts/component/legend', |
|
'echarts/component/geo', |
|
'echarts/component/tooltip', |
|
'echarts/component/visualMap' |
|
], function (echarts, gexf) { |
|
|
|
var chart = echarts.init(document.getElementById('main'), null, { |
|
renderer: 'canvas' |
|
}); |
|
|
|
$.get('./data/les-miserables.gexf', function (xml) { |
|
var graph = gexf.parse(xml); |
|
var categories = []; |
|
for (var i = 0; i < 9; i++) { |
|
categories[i] = { |
|
name: '类目' + i |
|
}; |
|
} |
|
graph.nodes.forEach(function (node) { |
|
node.itemStyle = null; |
|
node.symbolSize = 10; |
|
node.value = node.symbolSize; |
|
node.label = { |
|
normal: { |
|
show: node.symbolSize > 30 |
|
} |
|
}; |
|
node.category = node.attributes['modularity_class']; |
|
node.x = node.y = null; |
|
}); |
|
chart.setOption({ |
|
legend: [{ |
|
// selectedMode: 'single', |
|
data: categories.map(function (a) { |
|
return a.name; |
|
}) |
|
}], |
|
animationDurationUpdate: 1500, |
|
animationEasingUpdate: 'quinticInOut', |
|
series : [ |
|
{ |
|
name: 'Les Miserables', |
|
type: 'graph', |
|
layout: 'force', |
|
data: graph.nodes, |
|
links: graph.links, |
|
categories: categories, |
|
animation: false, |
|
roam: true, |
|
draggable: true, |
|
force: { |
|
repulsion: 100 |
|
}, |
|
label: { |
|
normal: { |
|
position: 'right' |
|
} |
|
} |
|
} |
|
] |
|
}); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |