zoukankan html css js c++ java

Echarts-复杂关系图（源码）

关系图：

代码：

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <script type="text/javascript" src="js/echarts.js"></script>
 5     <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
 6     <script type="text/javascript" src="js/dataTool.js"></script>
 7 </head>
 8 <body style="height: 600px; margin: 0">
 9 <div id="container" style="height: 100%"></div>
10 <script type="text/javascript">
11     var dom = document.getElementById("container");
12     var myChart = echarts.init(dom);
13     var app = {};
14     option = null;
15     myChart.showLoading();
16     $.get('data/les-miserables.gexf', function (xml) {
17         myChart.hideLoading();
18 
19         var graph = echarts.dataTool.gexf.parse(xml);
20         var categories = [];
21         for (var i = 0; i < 9; i++) {
22             categories[i] = {
23                 name: '类目' + i
24             };
25         }
26         graph.nodes.forEach(function (node) {
27             node.itemStyle = null;
28             node.value = node.symbolSize;
29             node.symbolSize /= 1.5;
30             node.label = {
31                 normal: {
32                     show: node.symbolSize > 30
33                 }
34             };
35             node.category = node.attributes.modularity_class;
36         });
37         option = {
38             title: {
39                 text: 'Les Miserables',
40                 subtext: 'Default layout',
41                 top: 'bottom',
42                 left: 'right'
43             },
44             tooltip: {},
45             legend: [{
46                 // selectedMode: 'single',
47                 data: categories.map(function (a) {
48                     return a.name;
49                 })
50             }],
51             animationDuration: 1500,
52             animationEasingUpdate: 'quinticInOut',
53             series : [
54                 {
55                     name: 'Les Miserables',
56                     type: 'graph',
57                     layout: 'none',
58                     data: graph.nodes,
59                     links: graph.links,
60                     categories: categories,
61                     roam: true,
62                     focusNodeAdjacency: true,
63                     itemStyle: {
64                         normal: {
65                             borderColor: '#fff',
66                             borderWidth: 1,
67                             shadowBlur: 10,
68                             shadowColor: 'rgba(0, 0, 0, 0.3)'
69                         }
70                     },
71                     label: {
72                         position: 'right',
73                         formatter: '{b}'
74                     },
75                     lineStyle: {
76                         color: 'source',
77                         curveness: 0.3
78                     },
79                     emphasis: {
80                         lineStyle: {
81                              10
82                         }
83                     }
84                 }
85             ]
86         };
87 
88         myChart.setOption(option);
89     }, 'xml');
90     if (option && typeof option === "object") {
91         var startTime = +new Date();
92         myChart.setOption(option, true);
93         var endTime = +new Date();
94         var updateTime = endTime - startTime;
95         console.log("Time used:", updateTime);
96     }
97 </script>
98 </body>
99 </html>

View Code

工程包下载：

https://pan.baidu.com/s/1vD1p3efCpHYJwMUTs8K96g

提取码：fxuk

查看全文

相关阅读:
技术实践 | 聊聊网易云信的信令网络库实践
 打破传统降噪技术看网易云信在语音降噪的实践应用
 聊聊前端日志库在 SaaS 产品中的应用与设计
 WebRTC 系列之音频会话管理
 简单五步，轻松构建本土「Clubhouse」
网易云信服务监控平台实践
 基于 Elasticsearch 的数据报表方案
 基于 WebRTC 实现自定义编码分辨率发送
 Python 设计模式—原型模式
 网络层—简单的面试问题

原文地址：https://www.cnblogs.com/smartisn/p/11855603.html