学习背景：做一个图论的题目的时候需要将结果可视化来直观的看效果，所以使用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. 在Windows10系统中配置和运行MongoDB数据库，linux开启mongdb

    参考链接:http://jingyan.baidu.com/article/11c17a2c03081ef446e39d02.html linux中开启mongodb服务: 1.  进入到/data/ ...

  2. CMDB-客户端

    配置文件的设置 大体思路: 1,通过开始文件将用户配置信息的文件放置到环境变量中. 2,在lib文件中的config文件中,从环境变量中获取到用户的配置,通过importlib模块导入用户配置文件,通 ...

  3. CloudStack tomcat集成方式分析

    CloudStack 的server.xml和tomcat6.conf都是软连接   CloudStack 在执行脚本时报异常如下:   修改vim /etc/sudoers文件,具体如下     以 ...

  4. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  5. vue与django中预防CSRF

    一.环境: vue2.0.django 1.10.x.iview 二.django后台处理 1.将django的setting的MIDDLEWARE中加入django.middleware.csrf. ...

  6. Windows下redis的安装与使用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  7. Java TreeMap的排序

    TreeMap 和 HashMap 用法大致相同,但实际需求中,我们需要把一些数据进行排序:以前在项目中,从数据库查询出来的数据放在List中,顺序都还是对的,但放在HashMap中,顺序就完全乱了. ...

  8. p4980 polya定理

    传送门 分析 orz ymh 代码 #include<iostream> #include<cstdio> #include<cstring> #include&l ...

  9. easyui combogrid 下拉框 智能输入

    1. 后台代码 using System;using System.Collections;using System.Collections.Generic;using System.Linq;usi ...

  10. [GO]json解析到结构体

    package main import ( "encoding/json" "fmt" ) type IT struct { Company string `j ...