本文主要是介绍echarts统计图表与工具关系可视化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
制作这份图的前提之下，先做了一份gexf格式的数据，这种格式数据结构就是网状节点，结构中主要分成两部分，一部分是节点（node），包括id，节点位置、颜色渲染、节点种类、节点属性、节点值，另外一部分是edge，包括id，source（源点）、target（目标点）和value（值）。
然后制作图格式数据之后，就可以使用Echarts.JS中进行配置项设置，使用的是setoptions—series—type：”graph”。
访问地址：http://106.14.147.72/Graphtest/graphnetwork.html
效果图：
源码如下
<html>
<head><meta charset="utf-8"><script type="text/javascript" src="JS/echarts.js"></script><script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script><script type="text/javascript" src="JS/dataTool.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="title" style="height: 6%">
<h2 style="text-align:center">统计图表与工具</h2>
</div>
<div id="container" style="height: 94%;"></div>
<script>var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;myChart.showLoading();$.get('Data/les-miserables.gexf', function (xml) {myChart.hideLoading();var graph =echarts.dataTool.gexf.parse(xml);var categories = [];categories[0] = { name: '图表分类' };categories[1] = { name: '图表类型' };categories[2] = { name: '图表工具' };graph.nodes.forEach(function (node) {var attr=[]attr.push(node.attributes.text.toString()),node.value =attr,node.symbol='circle',node.label = {normal: {show:true,position:'inside',textStyle: {'color': 'white','fontSize': 12,'fontWeight':'bold'}}};node.category = node.attributes.modularity_class;});option = {tooltip: {show:true,},legend: [{// selectedMode: 'single',data: categories.map(function (a) {return a.name;})}],//backgroundColor:'#F5F5DC',animationDuration: 1500,animationEasingUpdate: 'quinticInOut',series : [{name: '',type: 'graph',layout: 'none',data: graph.nodes,links: graph.links,left:150,top:70,focusNodeAdjacency: true,categories: categories,edgeSymbol: ['circle', 'arrow'],edgeSymbolSize: [4, 10],label: {normal: {position: 'right',formatter: '{b}'}},lineStyle: {normal: {width:2,opacity:0.8,color: '#38f',curveness: Math.random() * 0.3 // 线的弯曲度 0-1之间 越大则歪曲度更大}}}]};myChart.setOption(option);}, 'xml');if (option && typeof option === "object") {var startTime = +new Date();myChart.setOption(option, true);var endTime = +new Date();var updateTime = endTime - startTime;console.log("Time used:", updateTime);}</script>
</body>
</html>这篇关于echarts统计图表与工具关系可视化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
