用Echarts的力向导图可视化数据
学习背景：做一个图论的题目的时候需要将结果可视化来直观的看效果，所以使用Echarts来画。感觉效果不错。
Echarts下载地址：https://echarts.baidu.com/download.html
数据在另一个文件中存储，使用json存储数据，这个方法可能不太好，我前端知道的不多，以后有更好的方法了再来更新。
数据格式：
nodes = '[{ "id" : 0, "name" : "Node 0", "category" : 0},{ "id" : 1, "name" : "Node 1", "category" : 0},{ "id" : 2, "name" : "Node 2", "category" : 0},{ "id" : 3, "name" : "Node 3", "category" : 0},{ "id" : 4, "name" : "Node 4", "category" : 0},{ "id" : 5, "name" : "Node 5", "category" : 0},{ "id" : 6, "name" : "Node 6", "category" : 0},{ "id" : 7, "name" : "Node 7", "category" : 1},{ "id" : 8, "name" : "Node 8", "category" : 1},{ "id" : 9, "name" : "Node 9", "category" : 1}]';
links = '[{ "source" : 0, "target" : 1},{ "source" : 0, "target" : 8},{ "source" : 1, "target" : 5},{ "source" : 1, "target" : 8},{ "source" : 2, "target" : 5},{ "source" : 2, "target" : 8},{ "source" : 3, "target" : 7},{ "source" : 3, "target" : 9},{ "source" : 4, "target" : 6},{ "source" : 4, "target" : 7},{ "source" : 4, "target" : 9},{ "source" : 5, "target" : 8},{ "source" : 5, "target" : 9},{ "source" : 6, "target" : 9}]';
数据
前端：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8" />
</head>
<body style="height: 100%; margin: 0;background: #cccccc;">
<div id="container" style="height: 100%"></div>
<script src="js/echarts.js"></script>
<script type="text/javascript" src="before.json"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '力引导布局';
myChart.showLoading();
var nodes = JSON.parse(nodes);
var links = JSON.parse(links); option = {
title: {
text: 'Minimun Dominating Set', //自己修改吧
top: 'top',
left: 'left'
},
tooltip: {},
animation: true,
legend: { orient: 'horizontal', x: 'right', y: 'top', data: ['非支配集', '支配集'] },
series: [{
type: 'graph', //string 默认必写
id: "", // string 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
name: 'flyuz', //string系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
legendHoverLink: true, //boolean是否启用图例 hover 时的联动高亮。
layout: 'force', // string none不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
circular: { // Object 环形布局相关配置
rotateLabel: false //boolean是否旋转标签，默认不旋转
},
force: {
repulsion: 100,
gravity: 0.1, // number [ default: 0.1 ] 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: 30,
layoutAnimation: true
},
roam: true,
draggable: true, //boolean [ default: false ] 节点是否可拖拽，只在使用力引导布局的时候有用。
//这个重要
focusNodeAdjacency: true, // 重要！！！ boolean [ default: false ] 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
symbol: "circle", //关系图节点标记的图形。
symbolSize: 10,
symbolRotate: undefined, //number 关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
symbolOffset: [0, 0],
edgeSymbol: ['none', 'none'],
cursor: "none", // string [ default: 'pointer' ] 鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
categories : [ {name : '非支配集',itemStyle:{color:"#19BC52"}}, {name : '支配集', itemStyle:{color:"#ff715a"}} ],
data: nodes,
links: links,
label: {
normal: {
position: 'right'
}
}
}
]};
if (option && typeof option === "object") {
myChart.setOption(option, true);
myChart.hideLoading();
}
myChart.on('click', function(params) {
console.log(params);
console.log("click");
});
</script>
</body>
</html>
View
效果是这个样子的：
用Echarts的力向导图可视化数据的更多相关文章
- d3实现的力向导图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用百度Echarts制作力导向图
最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...
- flask+layui+echarts实现前端动态图展示数据
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化
mysql表的结构 数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化): 下面就是写代码了: 首先看一下项目目录: 数据库层 业务逻辑层 pac ...
- 前端可视化数据--echarts
很幸运能够给大家分享我对echarts的见解,在一些大型互联网公司面试时都会问到会使用echarts么? 今天在做项目时有这个需求,有幸学习echarts. 二.echarts.js的优势与不足 优 ...
- 【Visual Studio 扩展工具】使用 ComponentOne迷你图控件，进行可视化数据趋势分析
概述 迷你图 —— Sparklines是迷你的轻量级图表,有助于快速可视化数据. 它们是由数据可视化传奇人物Edward Tufte发明的,他将其描述为“数据密集,设计简单,字节大小的图形.”虽然迷 ...
- 可视化数据matplotlib之安装与简单折线图
matplotlib是一个可视化数据的模块,安装前需要先安装Visual Studio Community:然后去https://pypi.python.org/pypi上查找matplotlib并下 ...
- 力导向图（关系图） echarts的运用
<template> <div class="demo"> <div id="grap" class="grap&quo ...
随机推荐
- 前端开发之JavaScript HTML DOM理论篇二
主要内容: 1.HTML DOM元素 2.HTML DOM事件 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素 (1)方法一: appendChild() 追加 如 ...
- linux下in命令
1.用法 : ln [option] source_file dist_file -f 建立时,将同档案名删除. -i 删除前进行询问. ln ...
- 【LA3713 训练指南】宇航员分组 【2-sat】
题意 有A,B,C三个任务要分配给n个宇航员,其中每个宇航员恰好要分配一个任务.设所有n个宇航员的平均年龄为x,只有年龄大于或等于x的宇航员才能分配任务A:只有年龄严格小于x的宇航员才能分配任务B,而 ...
- [poj2104]kth-number(归并树求区间第k大)
复杂度:$O(nlog^3n)$ #include<cstdio> #include<cstring> #include<algorithm> #include&l ...
- 143. Reorder List(List)
Given a singly linked list L: L0→L1→…→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do th ...
- iOS 10 适配 ATS（app支持https通过App Store审核）
iOS 10 适配 ATS 一. HTTPS 其实HTTPS从最终的数据解析的角度,与HTTP没有任何的区别,HTTPS就是将HTTP协议数据包放到SSL/TSL层加密后,在TCP/IP层组成IP数据 ...
- 钉钉开发笔记（5）android系统中html软键盘的适配
最近项目中发现个别Android手机中存在弹出的软键盘会遮挡输入框的现象,最后自己写了一个方法(如下),问题基本解决. 记录下来,防止忘记.有什么不对的地方欢迎指正.O(∩_∩)O 1 //键盘适配 ...
- 最长的相同节点值路径 · Longest Univalue Path
［抄题］: Given a binary tree, find the length of the longest path where each node in the path has the s ...
- Java TreeMap的排序
TreeMap 和 HashMap 用法大致相同,但实际需求中,我们需要把一些数据进行排序:以前在项目中,从数据库查询出来的数据放在List中,顺序都还是对的,但放在HashMap中,顺序就完全乱了. ...
- 汉诺塔（hanoi）
汉诺塔代码: def hanoi(n,x,y,z): if n == 1: print(x,'-->',z) else: hanoi(n-1,x,z,y) print(x,'-->',z) ...