echart 桑基图操作事项
例图

注意:
option = {
label:{//formatter名字
show:true,
formatter:function(obj){
return obj.data.name+'_123'
}
},
tooltip: {
//可以自行添加,默认不添加
},
series: {
type: 'sankey',
layout:'none',
focusNodeAdjacency: 'allEdges',
data: [{
name: 'a',
value:11
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}],
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}, {
source: 'b1',
target: 'a1',
value: 1
}, {
source: 'b1',
target: 'c',
value: 2
}]
}
};
注意事项:
series。data和link里面的名称不能有重复的否则会报错
详细参照文章 里面demo4页面
echart 桑基图操作事项的更多相关文章
- vue项目中基于D3.js实现桑基图功能
前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很 ...
- python可视化动态图表: 关于pyecharts的sankey桑基图绘制
最近因工作原因,需要处理一些数据,顺便学习一下动态图表的绘制.本质是使具有源头的流动信息能够准确找到其上下级关系和流向. 数据来源是csv文件 导入成为dataframe之后,列为其车辆的各部件供应商 ...
- ggalluvial|TCGA临床数据绘制桑基图(Sankey)
本文首发于”生信补给站“,https://mp.weixin.qq.com/s/yhMgkST-rVD6SaQS7R-eoA 桑基图(Sankey diagram),是一种特定类型的流程图,图中延伸的 ...
- 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
- 数据可视化:Echart中k图实现动态阈值报警及实时更新数据
1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:
- 第七节,TensorFlow编程基础案例-TensorBoard以及常用函数、共享变量、图操作(下)
这一节主要来介绍TesorFlow的可视化工具TensorBoard,以及TensorFlow基础类型定义.函数操作,后面又介绍到了共享变量和图操作. 一 TesnorBoard可视化操作 Tenso ...
- echart折线区域图
在引入echart区域折线图时,没有出现对应的区域图 当发现引入下面代码到自己的代码中并没有对应的区域图 option = { xAxis: { type: 'category', boundaryG ...
- 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...
- React中用EChart写面积图
UED出的设计图如下: 实际展示效果如下: 调取的数据如下: "staffCountList":[ { "time":"2019-12-24 17: ...
随机推荐
- python技巧31[python中使用enum][转]
以下几种方法来模拟enum:(感觉方法一简单实用) # way1 class Directions: up = 0 down = 1 left = 2 right =3 ...
- Hdu1896 Stones(优先队列) 2017-01-17 13:07 40人阅读 评论(0) 收藏
Stones Time Limit : 5000/3000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submis ...
- 读《深入理解Windows Phone 8.1 UI控件编程》1.4.3 框架的应用示例:自定义弹出窗口有感
前些天买了园子里林政老师的两本 WP8.1 的书籍.毕竟想要学得深入的话,还是得弄本书跟着前辈走的. 今天读到 1.4.3 节——框架的应用示例:自定义弹出窗口这一小节.总的来说,就是弄一个像 Mes ...
- DBCC--常用命令
------------------------------------------------------ --1 DBCC FLUSHPROCINDB 清除SQL SERVER服务器内存中某个数据 ...
- kylin的clube合并后清理hbase中产生的相关历史表
kylin的clube合并后清理hbase中产生的相关历史表 kylin 的clube 历史的每次构建,都会产生一个hbase的表:虽然可以设置按照一定策略合并,但是合并后hbase 历史表不会被自动 ...
- ASP.NET下使用Combres对JS、CSS合并和压缩
记录一下,如何简单快捷压缩js和css,通过合并来减少请求次数. 用到的网址: http://www.nuget.org/packages/combres/ https://github.com/bu ...
- Netty 源码中对 Redis 协议的实现
原文地址: haifeiWu的博客 博客地址:www.hchstudio.cn 欢迎转载,转载请注明作者及出处,谢谢! 近期一直在做网络协议相关的工作,所以博客也就与之相关的比较多,今天楼主结合 Re ...
- Day 11 作业题
1.整理装饰器的形成过程,背诵装饰器的固定格式 固定格式 def wrapper(func): def inner(*args, **kwargs): #执行函数前进行的操作 ret = func(* ...
- Redis的认识和基本操作
Redis是什么 Redis 是一个高性能的开源的.C语言写的Nosql(非关系型数据库),数据保存在内存中. Redis 是以key-value形式存储的Nosql,和传统的关系型数据库不一样.不一 ...
- 网络编程——http协议
1.TCP/IP 基本知识 一.概念 TCP/IP协议是一个协议的集合,它是由众多的互联网相关联的协议集合的总称.如图 二.TCP/IP分层管理 TCP/IP模型分为5层:应用层,传输层,网络层,数据 ...