学习背景：做一个图论的题目的时候需要将结果可视化来直观的看效果，所以使用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. oracle 的分页与 mySQL'的分页转化

    oracle 分页:  关键字ROWNUM SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM ( SELECT A.*, ...

  2. elasticsearch中的mapping简介

    默认mapping elasticsearch(以下简称ES)是没有模式(schema)的,当我们执行以下命令: curl -d '{"name":"zach" ...

  3. Request.IsAuthenticated

    Original question that the answer below refers to: I have a forms based application that is giving m ...

  4. Linux实战教学笔记20:初级阶段结束，中级阶段起航

    第二十节 第一阶段结束第二阶段起航 标签(空格分隔): Linux实战教学笔记-陈思齐 一,承上 Linux实战教学笔记的基础核心能力阶段也就是第一阶段到此也就告一段落了.如果同学们能基本全都掌握,再 ...

  5. Fog

    [Fog] Fog parameters are controlled with Fog command. Fogging blends the color of the generated pixe ...

  6. SQL的3个主要组成

    SQL语言包含3个部分:数据定义语言(DDL),数据操作语言(DML),数据控制语言(DCL) 数据定义语言(DDL) 数据定义语言用于定义和管理对象,例如数据库.数据表及视图等.典型代表有CREAT ...

  7. java-tip-Collections.synchronized系列生成的容器

    这个系列的容器,和Vector或者HashTable之流的差不多, 区别是: Vector和HashTable是在关键方法上加synchronized关键字 而 Collections.synchro ...

  8. 心理学轨迹及AI基础理论读后感

    今天简单的看了下心理学轨迹及AI基础理论发现世界确实是那3%的人改变的,我等屁民还努力在红尘中争渡,下面简单记录下我刚看完的思路,算做个笔记给自己看.. 模型建立的最终结果可以解读所有的心理学现象,可 ...

  9. Flip

    Flip是一个能够让任意HTML.文本或jQuery Element产生漂亮翻转效果的jQuery插件. 可以配置翻转方向:从右到左.上到下或从左到右.下到上.翻转的速度也可以配置. 效果如下图所示: ...

  10. Perl 学习笔记－模块

    1.Perl模块介绍 2个来源, 一个是随Perl发行版本一同打包, 只要安装了Perl就可以使用;  另一种是需要从CPAN上下载,自己安装.   寻找模块之前, 先检查系统上是否已经安装过了,   ...