例图

注意:

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 桑基图操作事项的更多相关文章

  1. vue项目中基于D3.js实现桑基图功能

    前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很 ...

  2. python可视化动态图表: 关于pyecharts的sankey桑基图绘制

    最近因工作原因,需要处理一些数据,顺便学习一下动态图表的绘制.本质是使具有源头的流动信息能够准确找到其上下级关系和流向. 数据来源是csv文件 导入成为dataframe之后,列为其车辆的各部件供应商 ...

  3. ggalluvial|TCGA临床数据绘制桑基图(Sankey)

    本文首发于”生信补给站“,https://mp.weixin.qq.com/s/yhMgkST-rVD6SaQS7R-eoA 桑基图(Sankey diagram),是一种特定类型的流程图,图中延伸的 ...

  4. 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  5. 数据可视化:Echart中k图实现动态阈值报警及实时更新数据

    1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:

  6. 第七节,TensorFlow编程基础案例-TensorBoard以及常用函数、共享变量、图操作(下)

    这一节主要来介绍TesorFlow的可视化工具TensorBoard,以及TensorFlow基础类型定义.函数操作,后面又介绍到了共享变量和图操作. 一 TesnorBoard可视化操作 Tenso ...

  7. echart折线区域图

    在引入echart区域折线图时,没有出现对应的区域图 当发现引入下面代码到自己的代码中并没有对应的区域图 option = { xAxis: { type: 'category', boundaryG ...

  8. 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

    使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...

  9. React中用EChart写面积图

    UED出的设计图如下:  实际展示效果如下: 调取的数据如下: "staffCountList":[ { "time":"2019-12-24 17: ...

随机推荐

  1. How To Use XDOLoader to Manage, Download and Upload Files? (文档 ID 469585.1)

    Applies to: BI Publisher (formerly XML Publisher) - Version 5.6.3 to 5.6.3 [Release 5] Information  ...

  2. Golang Tcp粘包处理(转)

    在用golang开发人工客服系统的时候碰到了粘包问题,那么什么是粘包呢?例如我们和客户端约定数据交互格式是一个json格式的字符串: {"Id":1,"Name" ...

  3. 申请Let's Encrypt通配符HTTPS证书

    ./certbot-auto --server https://acme-v02.api.letsencrypt.org/directory -d "*.xxx.com" --ma ...

  4. C# 一些代码小结--串口操作

    串口解析显示中文 private String SerialPortReadStr() { try { String str = null; int n = serialPort1.BytesToRe ...

  5. WPF点滴(2) 创建单实例应用程序

    最近有同事问道在应用程序启动之后,再次双击应用程序,如何保证不再启动新的应用程序,而是弹出之前已经启动的进程,本质上这就是创建一个单实例的WPF应用程序.在VS的工程树中有一个App.xaml和App ...

  6. scapy IPv6 NS NA报文构造

    NS 报文构造: #! /bin/python from scapy.all import * a=IPv6(src='2a01:4f8:161:5300::40', dst='ff02::1:ff0 ...

  7. jzoj5878

    tj:這道題可以想到排列組合 對於第一問,我們知道,左轉的次數比右轉次數多4,所以答案是c(n,n/2-2) 對於第二問,我們發現,不能出現下凹的情況,所以不能同時出現2個左拐,且路徑可以分為4段,且 ...

  8. 【JS深入学习】——函数创建和重载

    今天做一个关注/取消的功能,由于需要向后台发送请求,想通过控制用户点击发送的频次减少不必要的请求,即在一定时间内,用户点击多次但只发送一次数据,自然而然想到了使用[函数节流]. function th ...

  9. Android之自定义控件

    开发自定义控件的步骤: 1.了解View的工作原理  2. 编写继承自View的子类 3. 为自定义View类增加属性  4. 绘制控件  5. 响应用户消息  6 .自定义回调函数    一.Vie ...

  10. windows系统上安装与使用Android NDK r5

    windows系统上安装与使用Android NDK r5  很早就听说了android的NDK应用,只是一直没有时间去研究,今天花了点时间在windows平台搭建了NDK环境,并成功运行了第一个简单 ...