学习背景：做一个图论的题目的时候需要将结果可视化来直观的看效果，所以使用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的力向导图可视化数据的更多相关文章

  1. d3实现的力向导图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 使用百度Echarts制作力导向图

    最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...

  3. flask+layui+echarts实现前端动态图展示数据

    效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...

  4. echarts、higncharts折线图或柱状图显示数据为0的点

    echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...

  5. 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化

    mysql表的结构   数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化):   下面就是写代码了: 首先看一下项目目录:   数据库层   业务逻辑层   pac ...

  6. 前端可视化数据--echarts

    很幸运能够给大家分享我对echarts的见解,在一些大型互联网公司面试时都会问到会使用echarts么?  今天在做项目时有这个需求,有幸学习echarts. 二.echarts.js的优势与不足 优 ...

  7. 【Visual Studio 扩展工具】使用 ComponentOne迷你图控件，进行可视化数据趋势分析

    概述 迷你图 —— Sparklines是迷你的轻量级图表,有助于快速可视化数据. 它们是由数据可视化传奇人物Edward Tufte发明的,他将其描述为“数据密集,设计简单,字节大小的图形.”虽然迷 ...

  8. 可视化数据matplotlib之安装与简单折线图

    matplotlib是一个可视化数据的模块,安装前需要先安装Visual Studio Community:然后去https://pypi.python.org/pypi上查找matplotlib并下 ...

  9. 力导向图（关系图） echarts的运用

    <template> <div class="demo"> <div id="grap" class="grap&quo ...

随机推荐

  1. 通过devtools在centos系统中启用高版本的gcc

    C++11出来好久了,现在还是使用c++03的,需要在centos6.6的系统上实现gcc的升级,又不想自己编译代码. 于是选用了devtoolsset系列,安装脚本如下 安装脚本如下 functio ...

  2. redis在linux下的安装和配置

    1 Installation Download, extract and compile Redis with: $ wget http://download.redis.io/releases/re ...

  3. springMVC环境搭建(1)

    工作一年以来,写的都是.net,最近比较闲,想把之前学过的java相关的东西捡起来,也学点新的东西.以前做过SSH架构,一直好奇spring mvc是怎么样的,所以今天试试看. 总体的代码结构 手动输 ...

  4. Array.prototype.slice用法详解

    slice方法是定义在js数组原型中的方法,用于截取数组的部分元素,具体使用如下: arrayExample.slice(start, end); start为起始元素位置,end为截止元素位置,如: ...

  5. Hello Build To Win！我们是奶牛小分队！——记第一次团队作业

    Hello Build To Win!我们是奶牛小分队! section 1 组建团队 1.  队员介绍: 姓名 学号 风格 擅长技术 编程兴趣 希望软工角色 吴建瑜 2016012024 努力学习, ...

  6. java算法 第七届 蓝桥杯B组（题+答案） 1.煤球数目

    1.煤球数目  (结果填空) 有一堆煤球,堆成三角棱锥形.具体:第一层放1个,第二层3个(排列成三角形),第三层6个(排列成三角形),第四层10个(排列成三角形),....如果一共有100层,共有多少 ...

  7. 监控磁盘IO

    一.添加userparameter_io.conf配置文件 在/etc/zabbix/zabbix_agentd.d下添加userparameter_io.conf, 文件内容如下: UserPara ...

  8. CentOS 6.4一键自动化安装ISO镜像光盘

    下载CentOS-6.4-x86_64-minimal.iso 1 http://mirrors.163.com/centos/6.4/isos/x86_64/CentOS-6.4-x86_64-mi ...

  9. spring4-2-bean配置-9-通过工厂方法配置bean

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjwAAAFICAIAAADbNrOHAAAgAElEQVR4nO2dy7W0uhGFOxWn4JEXAS

  10. windows 查看端口被占用进程

    查看占用63243是谁 C:\Users\Administrator>netstat -aon|findstr "63243" TCP 172.27.33.11:63243 ...