slides/ani/asset/ec-demo/transform-graph.html (102 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/echarts.min.js"></script>
<script src="../common/extension/dataTool.min.js"></script>
<script src="../data/les-miserables.gexf.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
</style>
<div id="main"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var animation = location.href.split('?');
if (animation[1]) {
var match = animation[1].match(/animation=([a-zA-Z0-9_]+)/);
animation = match[1] !== 'false' && match[1] !== '0' && !!match[1];
}
else {
animation = true;
}
var path = 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891';
var graph = echarts.dataTool.gexf.parse(window.rawXML);
var categories = [];
for (var i = 0; i < 9; i++) {
categories[i] = {
name: '类目' + i
};
}
graph.nodes.forEach(function (node) {
node.itemStyle = null;
node.symbolSize /= 2;
node.value = node.symbolSize;
node.label = {normal: {show: false}};
node.category = node.attributes.modularity_class;
});
option = {
animation: animation,
tooltip: {},
toolbox: {
left: 'center',
top: 10,
itemSize: 20,
feature: {
myTool1: {
show: true,
title: 'specified layout',
icon: path,
onclick: function () {
myChart.setOption({
series: {
id: 'a',
layout: 'none'
}
});
}
},
myTool2: {
show: true,
title: 'circular layout',
icon: path,
onclick: function () {
myChart.setOption({
series: {
id: 'a',
layout: 'circular'
}
});
}
}
}
},
animationDurationUpdate: 2000,
animationEasingUpdate: 'quinticInOut',
series : [
{
id: 'a',
type: 'graph',
layout: 'circular',
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
label: {
normal: {
position: 'right',
formatter: '{b}'
}
},
lineStyle: {
normal: {
curveness: 0.3
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>