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: ...
随机推荐
- TFlearn——(2)SVHN
1,数据集简介 SVHN(Street View House Number)Dateset 来源于谷歌街景门牌号码,原生的数据集1也就是官网的 Format 1 是一些原始的未经处理的彩色图片,如下图 ...
- Java中取两位小数
请参考下面函数: private String getFormated(String s){ float f=Float.parseFloat(s); java.text. ...
- Android-WebViewUtils-工具类
WebViewUtils-工具类是专门处理,Android API 中的WebView使用,公共方法抽取定义: package common.library.utils; import android ...
- 一、配置etcd数据库
etcd服务作为Kubernetes集群的主数据库,在安装Kubernetes各服务之前需要首先安装和启动. 1. 安装etcd yum -y install etcd 2. 修改etcd配置文件 ...
- 设计模式之适配器模式(Adapter Pattern)
在正式开始之前,让我们先思考几个问题: 如果现有的新项目可以利用旧项目里大量的遗留代码,你打算从头开始完成新项目还是去了解旧项目的模块功能以及接口? 如果你了解过遗留代码之后,发现有几个重要的功能模块 ...
- EasyUi Grid以POST方式传送参数绑定
function LoadList() { $("#TableContainer").datagrid({ url: '/HM/ ...
- C#中的NameValueCollection简介
NameValueCollection继承自NameObjectCollectionBase,并且和一般的键值对不同的是,它支持集合中出现相同的Key. 引用:using System.Collect ...
- 认识与学习shell
linux的终端机执行命令的方式,是通过bash环境来处理的.bash包括变量的设置与使用,.bash操作环境的构建.数据流重定向的功能.下面的知识,对主机的维护与管理有重要的帮助. 管理整个计算机硬 ...
- Android------------------ListVIew学习
一.ListActivity : 如何你的Activity仅涉及到一个列表(ListVIew),那么你就该考虑使用ListActivity这个类 注意事项:1.ListActivity 里面默认包含 ...
- jzoj5806
我們發現,如果有奇環顯然無解,因為我們每一次合併一個奇環,一定會產生一個偶環和一個更小的奇環,最終會形成一個三元環而無法合併 所以,這個圖需要是一個二分圖,需要進行二染色 然後把這個圖所有的偶環找出來 ...