您的位置：首页 > 其它

Echart 关系图使用

2017-04-24 18:43 148 查看

下载资源文件

dataTool.min.js

les-miserables.gexf

其他自行找

Coding

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src='echarts.js'></script>
<script src='dataTool.min.js'></script>
<script src='../jquery-1.12.4.min.js'></script>
</head>
<body>
<div id='main' style='width: 600px;height:400px;'></div>
<script type='text/javascript'>
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get('les-miserables.gexf', function (xml) {
myChart.hideLoading();
var graph = echarts.dataTool.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.value = node.symbolSize;
node.symbolSize /= 1.5;
node.label = {
normal: {
show: node.symbolSize > 30
}
};
node.category = node.attributes.modularity_class;
});
option = {
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
circular: {
rotateLabel: true
},
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
label: {
normal: {
position: 'right',
formatter: '{b}'
}
},
lineStyle: {
normal: {
color: 'source',
curveness: 0.3
}
}
}
]
};
myChart.setOption(option);
}, 'xml');
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Echart

相关文章推荐

新的分享

章节导航