Echarts关系图（使用重力图）

首先展示一下该关系图效果

很简单的关系图，不过其中经历不少波折。

使用的是echarts2。

现在贴出代码：

  1  function dos(){
  2  var name=document.getElementById("name").value;
  3  $.post("GetChartData",{name:name},function(data){
  4      // 路径配置
  5         require.config({
  6             paths: {
  7                 echarts: 'http://echarts.baidu.com/build/dist'
  8             }
  9         });
 10         require(
 11                 [
 12                     'echarts',
 13                     'echarts/chart/force' // 使用重力图加载模块，按需加载
 14                 ],
 15                 function (ec) {
 16                     var strArray=new Array();
 17                     strArray=data.split("***");
 18                     var node=strArray[0];
 19                     var link=strArray[1];
 20                     var ObjNode=eval("("+node+")");
 21                     var ObjLink=eval("("+link+")");
 22                     // 基于准备好的dom，初始化echarts图表
 23                     var myChart = ec.init(document.getElementById('main'));
 24                     var option = {
 25                         title : {
 26                             text: '关联关系图',
 27                             x:'right',
 28                             y:'bottom'
 29                         },
 30                         tooltip : {
 31                             show:true,
 32                             trigger: 'item',
 33                             formatter: '{a} : {b}'
 34                         },
 35                         toolbox: {
 36                             show : true,
 37                             feature : {
 38                                 restore : {show: true},
 39                                 magicType: {show: true, type: ['force', 'chord']},
 40                                 saveAsImage : {show: true}
 41                             }
 42                         },
 43                         legend: {
 44                             x: 'left',
 45                             data:[
 46                                     {name:'企业',icon:'rect'},
 47                                     {name:'个人'}
 48                             ]
 49                         },
 50                         series : [
 51                             {
 52                                 type:'force',
 53                                 name : "关系",
 54                                 ribbonType: false,
 55                                 categories : [
 56                                     {
 57                                         name: '企业'
 58                                     },
 59                                     {
 60                                         name:'个人'
 61                                     }
 62                                 ],
 63                                 itemStyle: {
 64                                     normal: {
 65                                         label: {
 66                                             show: true,
 67                                             textStyle: {
 68                                                 color: '#333'
 69                                             }
 70                                         },
 71                                         nodeStyle : {
 72                                             brushType : 'both',
 73                                             borderColor : 'rgba(255,215,0,0.4)',
 74                                             borderWidth : 1
 75                                         }
 76                                     },
 77                                     emphasis: {
 78                                         label: {
 79                                             show: false
 80                                         },
 81                                         nodeStyle : {
 82                                             //r: 30
 83                                         },
 84                                         linkStyle : {}
 85                                     }
 86                                 },
 87                                 symbolSize: 15,
 88                                 minRadius : 15,
 89                                 maxRadius : 25,
 90                                 gravity: 1.1,
 91                                 scaling: 1.2,
 92                                 draggable: true,
 93                                 linkSymbol: 'arrow',
 94                                 steps: 10,
 95                                 coolDown: 0.9,
 96                                 //preventOverlap: true,
 97                                 nodes:ObjNode,
 98                                 links :ObjLink
 99                             }
100                         ]
101                     };
102
103                     // 为echarts对象加载数据
104                     myChart.setOption(option);
105                 }
106         );
107
108            }, "Json");
109 }

上面这个dos()方法是我通过点击按钮生成图表不必在意。

之后使用post请求从后台调用图表所用数据，是一个json串这个可以根据

实际需求删掉更改。

还有就是你需要自己写一个固定长宽的div并附上id。

从图中可以看出当我鼠标放在节点上时，左侧相应的出现该节点信息（注意不是点击）

这个操作就是节点的hover事件，获取节点值传到后台获取数据后显示在页面上。

配置如下：

var ecConfig=require('echarts/config');//在上面代码22行加入

myChart.on(ecConfig.EVENT.HOVER,***);//***代表方法名，自定

同时53和54行加入：mouseable:true,

这样你就可以在请求后台信息返回前台了。

注意：该方法必须写在echarts的方法中，即最上面代码的108行后面，例如***方法名为example,

则在108行后写获取该节点名称的方法：

function example(param){//注意param是echarts的图表对象var name=param.name;
}

还有就是节点的点击事件了，

myChart.on(ecConfig.EVENT.CLICK,***);//***代表方法名，自定,在上面代码22行加入同时53和54行加入：clickable:true,

其中图例以及节点都可以使用图片作为节点样式。

还有就是lengend可以动态显示以及隐藏

首先选择了Echarts作为工具制作这个图表。这个工具官网贴出来：http://echarts.baidu.com/demo.html#line-marker

转载于:https://www.cnblogs.com/ysj4428/p/6118214.html

Echarts关系图（使用重力图）相关推荐

echarts 关系图 option
echarts 关系图 option <script type="text/javascript" src="plugins/echarts/echarts.min ...
echarts关系图配置详解
title 图表标题样式 title: {text: "ECharts简单线形图表及其配置展示实例", //正标题link: "http://www.stepday.co ...
知识图谱---echarts关系图
一:三级关系图知识图谱最近写了个demo,主要功能是搜索实体,搜索结果显示与该实体相关的公司.子公司.设备.位置.状态.危害这六类,数据是通过我司的数据标注系统提供的.后端用到的技术栈是python ...
echarts关系图demo
实现效果: 代码: <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
ECharts关系图(详细示例——满满的注释)
图表效果如下: 具体代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
echarts关系图graph点击折叠
首选参考别人的地址:echarts节点折叠实现_SongJingzhou的博客-CSDN博客 echarts下载: echarts下载其次先看一下我改的效果图: 接下来分段解释一下需要的代码: 1. ...
echarts关系图配置，及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题
情景:由于人物关系复杂,可以有几个 --几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空.所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度 ...
Echarts关系图的例子
1.普通关系图 option = {title: {text: '数据图谱'},tooltip: {trigger: 'item',formatter: '{a} : {b}'// 如果用索引关联关系 ...
在 echarts关系图动态线上添加文字_多折线堆叠图如何制作？
润乾报表有丰富的图形展现效果,不仅自带了多种统计图形,还内置了第三方统计图形 D3 还有 echarts 统计图.最近好多客户提出想要实现多折线堆叠的统计图,我用自带的图形和 echarts 两种方式 ...
echarts 关系图graph
1.配置数据类型data:[{name:'节点名称',value:'节点值'x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式.y:节点坐标,symbolSize: 80,dragga ...

Echarts关系图（使用重力图）

首先展示一下该关系图效果

Echarts关系图（使用重力图）相关推荐

最新文章

热门文章