在运行Les-Miserables示例时，出了很多问题。以下为需要注意的两个点
一.工具包的引入。
这里需要三个工具包，echarts、jquery、dataTool。前两个直接通过cdn引入即可，dataTool则去github上面复制下来自己新建一个即可。
dataTool.min.js下载网址：
(https://github.com/apache/incubator-echarts/blob/master/dist/extension/dataTool.min.js)
<!-- 三个工具包缺一不可 -->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="dataTool.min.js"></script>
二、les_miserables.gexf数据文件。
由于官方示例中的les_miserables.gexf文件与我们本机不是同一台服务器，因此这里牵扯到了跨域访问问题。这里我们直接去下载下来修改Ajax.get()里面的url就好，下载地址直接去他的网站源代码中找。(当然也可以用JSONP给请求过来。)
下载地址：https://www.echartsjs.com/examples/data/asset/data/les-miserables.gexf
$.get('url', function(xml) // url为les_miserables.gexf文件路径
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 三个工具包缺一不可 -->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="dataTool.min.js"></script>
<title>Les Miserables</title>
</head>
<body>
<div id="main" style="width: 1000px;height: 1000px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
myChart.showLoading();
$.get('les_miserables.gexf', function(xml) { //读取本地文件
console.log('读取到数据文件')
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;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
focusNodeAdjacency: true,
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
lineStyle: {
width: 10
}
}
}]
};
myChart.setOption(option);
}, 'xml');
</script>
</body>
</html>
网友评论