echarts绘制节点关系图

HTML代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>关系图</title>
</head><body><div id="main" style="width: 1200px; height: 700px"></div><div id="ss"></div><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});require(["echarts", "echarts/chart/force"], function(ec) {var myChart = ec.init(document.getElementById('main'), 'macarons');var option = {tooltip: {show: false},series: [{type: 'force',name: "Force tree",itemStyle: {normal: {label: {show: true},nodeStyle: {brushType: 'both',borderColor: 'rgba(0,215,0,0.4)',borderWidth: 1}}},categories: [{name: 'lol'}, {name: '位置'}, {name: '英雄'}, {name: '技能'}],nodes: [{id: 0,category: 0,name: '0',label: '峡谷之巅',symbolSize: 60,ignore: false,flag: true}, {id: 1,category: 1,name: '1',label: '上单',symbolSize: 40,ignore: true,flag: true}, {id: 2,category: 2,name: '2',label: '剑姬',symbolSize: 20,ignore: true,flag: true}, {id: 3,category: 2,name: '3',label: '贾科斯',symbolSize: 20,ignore: true,flag: true}, {id: 4,category: 1,name: '4',label: '中单',symbolSize: 40,ignore: true,flag: true}, {id: 5,category: 2,name: '5',label: '辛德拉',symbolSize: 20,ignore: true,flag: true}, {id: 6,category: 2,name: '6',label: '阿卡丽',symbolSize: 20,ignore: true,flag: true}, {id: 7,category: 2,name: '7',label: '发条',symbolSize: 20,ignore: true,flag: true}, {id: 8,category: 1,name: '8',label: '打野',symbolSize: 40,ignore: true,flag: true}, {id: 9,category: 2,name: '9',label: '扎克',symbolSize: 20,ignore: true,flag: true}, {id: 10,category: 2,name: '10',label: '男枪',symbolSize: 20,ignore: true,flag: true}, {id: 11,category: 2,name: '11',label: '豹女',symbolSize: 20,ignore: true,flag: true}, {id: 12,category: 2,name: '12',label: '千珏',symbolSize: 20,ignore: true,flag: true}, {id: 13,category: 3,name: '13',label: '隼舞',number: 45,symbolSize: 20,ignore: true,flag: true}, {id: 14,category: 3,name: '14',label: '寒影',number: 52,symbolSize: 20,ignore: true,flag: true}, {id: 15,category: 3,name: '15',label: '霞阵',number: 52,symbolSize: 20,ignore: true,flag: true}, {id: 16,category: 3,name: '16',label: '幻樱杀缭乱',number: 52,symbolSize: 30,ignore: true,flag: true}],links: [{source: 1,target: 0}, {source: 4,target: 0}, {source: 8,target: 0}, {source: 2,target: 1}, {source: 3,target: 1}, {source: 5,target: 4}, {source: 6,target: 4}, {source: 7,target: 4}, {source: 9,target: 8}, {source: 10,target: 8}, {source: 11,target: 8}, {source: 12,target: 8}, {source: 13,target: 6}, {source: 14,target: 6}, {source: 15,target: 6}, {source: 16,target: 6}]}]};myChart.setOption(option);var ecConfig = require('echarts/config');function openOrFold(param) {var option = myChart.getOption();var nodesOption = option.series[0].nodes;var linksOption = option.series[0].links;var data = param.data;var linksNodes = [];var categoryLength = option.series[0].categories.length;if (data != null && data != undefined) {if (data.flag) {for (var m in linksOption) {if (linksOption[m].target == data.id) {linksNodes.push(linksOption[m].source);}}if (linksNodes != null && linksNodes != undefined) {for (var p in linksNodes) {nodesOption[linksNodes[p]].ignore = false;nodesOption[linksNodes[p]].flag = true;}}nodesOption[data.id].flag = false;myChart.setOption(option);} else {for (var m in linksOption) {if (linksOption[m].target == data.id) {linksNodes.push(linksOption[m].source);}if (linksNodes != null && linksNodes != undefined) {for (var n in linksNodes) {if (linksOption[m].target == linksNodes[n]) {linksNodes.push(linksOption[m].source);}}}}if (linksNodes != null && linksNodes != undefined) {for (var p in linksNodes) {nodesOption[linksNodes[p]].ignore = true;nodesOption[linksNodes[p]].flag = true;}}nodesOption[data.id].flag = true;myChart.setOption(option);}}}myChart.on(ecConfig.EVENT.CLICK, openOrFold);myChart.on('click', function(param) {url = 'https://www.ruan8.com/wenda/12132.html'if (param.data['category'] == '3') {window.open(url)}});});</script></body></html>

点击它

再次点击另外三个

点击阿里卡

echarts绘制节点关系图相关推荐

【图形基础篇】02 # 指令式绘图系统：如何用Canvas绘制层次关系图？
说明 [跟月影学可视化]学习笔记. 如何用 Canvas 绘制几何图形? 1. Canvas 元素和 2D 上下文 Canvas 元素上的 width 和 height 属性不等同于 Canvas 元 ...
使用pyechart生成节点关系图
前言前几天写过使用networkx生成节点关系图,但是,生成图的图中节点的分布,始终是不如人意,没找到合适的布局图参考这里.后来发现可以使用echart来实现类似的目的,就尝试了一下,不断调整之后得 ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
便捷绘制人物关系图的软件分享
看阿加莎.东野圭吾的推理小说,或者<红楼梦><冰与火之歌>这类的史诗巨作,经常会被错综复杂的人物关系弄昏头脑. 面对这些情况,怎么办? 今天分享两款压箱底的工具,支持高效绘制人 ...
用jointjs绘制微博关系图
利用jointjs绘制矩形和箭头绘制微博关系图可是我不会自动布局...如果有大神知道的话请多多指教! <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
Vue 使用 vis-network 绘制网络关系图
1.Vis-network visjs 提供了一个网络视图模块,提供给我们绘制网络之间的各个点.线之间的关系,这个的话就比较类似于echarts的地图,在地图上打点画线的逻辑,区别在于使用visjs可 ...
Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）...
导读如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
python绘制网络关系图
import networkx as nx# 数据准备 G = nx.DiGraph() # 单边有向图G.add_edges_from([(1,2), ('x','y'), (2,3)...]) # ...
echarts绘制嵌套环形图(南丁格尔玫瑰图)
根据专业总人数和学院总人数绘制嵌套环形图首先,echarts的基本步骤引入js,准备容器,初始化实例, <script src="lib/echarts.min.js"& ...

echarts绘制节点关系图

echarts绘制节点关系图

echarts绘制节点关系图相关推荐

最新文章

热门文章