Echarts中graph类型的运用求教
以下是百度Echarts官网上关系图的源码,但是这个关系图的node节点和edge都是静态文件里规定好的,我现在想动态实现,点击其中一个节点A然后新产生一个新节点B,并且有A和B之间的edge,就类似于百度的人物关系图谱那种动态生成,怎么实现啊?求教
myChart.showLoading();
$.get('data/asset/data/les-miserables.gexf', function (xml) {
myChart.hideLoading();
var graph = echarts.dataTool.gexf.parse(xml);
var categories = [];
for (var i = 0; i < 9; i++) {
categories[i] = {
name: '类目' + i
};
}
graph.nodes.forEach(function (node) {
node.itemStyle = null;
node.value = node.symbolSize;
node.label = {
normal: {
show: node.symbolSize > 30
}
};
node.category = node.attributes.modularity_class;
});
option = {
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
label: {
normal: {
position: 'right',
formatter: '{b}'
}
},
lineStyle: {
normal: {
curveness: 0.3
}
}
}
]
};
myChart.setOption(option);
}, 'xml');
Echarts中graph类型的运用求教的更多相关文章
- 记录使用echarts的graph类型绘制流程图全过程(一)-x,y位置的计算
先说下本次案例业务需求,输入2个节点,获取数据后绘制出2个节点间的路径,之前使用的是网状图,但是网状图的效果不佳,需要转换成流程图的模式: 那么如何在不修改数据的情况下,实现类似效果尼? 看了下ech ...
- 记录使用echarts的graph类型绘制流程图全过程(二)- 多层关系和圆形图片的设置
本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置 图片的设置 如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态 ...
- ECharts 中的事件和行为
在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...
- Echarts中太阳图(Sunburst)的实例
Echarts中太阳图(Sunburst)的实例 目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [ ...
- 详解Java 8中Stream类型的“懒”加载
在进入正题之前,我们需要先引入Java 8中Stream类型的两个很重要的操作: 中间和终结操作(Intermediate and Terminal Operation) Stream类型有两种类型的 ...
- SQL 中不同类型的表连接
http://www.linuxidc.com/Linux/2012-08/68035.htm 1.简介 在关系型数据库中,join操作是将不同的表中的数据联合在一起时非常通用的一种做法.首先让我们看 ...
- Object-C中动态类型对象相关操作汇总
Object-C(以后简称OC)中有id类型,相对于明确定义类型的静态类型,称为动态类型. 使用动态类型,配合多态(不同类型拥有同名方法),动态绑定(运行时决定实际调用的方法)可以将很多判断延迟到运行 ...
- MYSQL中 ENUM 类型
MYSQL中 ENUM 类型的详细解释 ENUM类型 ENUM 是一个字符串对象,其值通常选自一个允许值列表中,该列表在表创建时的列规格说明中被明确地列举. 在下列某些情况下,值也可以是空串(&quo ...
- 第66课 C++中的类型识别
1. 类型识别 (1)在面向对象中可能出现下面的情况 ①基类指针指向子类对象 ②基类引用成为子类对象的别名 ▲静态类型——变量(对象)自身的类型(定义变量类型时类型或参数类型) ▲动态类型——指针(引 ...
随机推荐
- 6.1Python文件的操作(一)
目录 目录 前言 (一)基础类型 ==1.只读== ==2.只写== ==3.追加== (二)b二进制组合 ==1.读写二进制文件== (三)+ 附加组合 ==1.读附加== ==2.写附加== == ...
- Burp Suite 抓取http、https流量配置+CA证书安装
HTTPS协议是为了数据传输安全的需要,在HTTP原有的基础上,加入了安全套接字层SSL协议,通过CA证书来验证服务器的身份,并对通信消息进行加密.基于HTTPS协议这些特性,我们在使用Burp Pr ...
- Docker容器学习与分享12
Docker多主机管理 之前在一台Centos7上安装了Docker,如果是在多台主机上都安装Docker,用手动安装的方法不光效率低下,而且有可能出错,所以可以使用Docker Machine进行多 ...
- pb中遍历查询数据库数据问题(数据库为 sql server)
指针可以实现但是不推荐 例如:(部分代码) for ll_a = 1 to ll_count ll_b = ll_i + ll_a //插入行行号先下移一位 dw_main.inser ...
- vue项目的架构设计完善详解
vue项目构建vuex+mock层 vue项目添加jsBridge(与原生交互的) vue项目添加代码格式化
- centos7下安装docker(6镜像总结)
学了很长时间的镜像了,从镜像的分层,缓存的特性,到制作镜像:通过docker commint和docker build创建,再到制作dockerfile以及dockerfile中常用的参数FROM,M ...
- pku1365 Prime Land (数论,合数分解模板)
题意:给你一个个数对a, b 表示ab这样的每个数相乘的一个数n,求n-1的质数因子并且每个指数因子k所对应的次数 h. 先把合数分解模板乖乖放上: ; ans != ; ++i) { ) { num ...
- 【js】 ==与===区别
1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进 ...
- M600 (1)飞行注意事项
- [luogu 5300][bzoj 5502] [GXOI/GZOI2019] 与或和
题面 思路还是挺容易想的, 只是由于我还是太\(naive\)了一点不会做只会打暴力吧...... 题目要我们求所有子矩阵的\(and\)值之和与\(or\)值之和, 一看之下似乎不好入手, 我们慢慢 ...