echarts-树图、关系图、桑基图、日历图

2024-05-24 20:28
文章标签 关系 日历 echarts 树图 桑基图

本文主要是介绍echarts-树图、关系图、桑基图、日历图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

树图

树图主要用来表达关系结构。
树图的端点也收symbol的调节
树图的特有属性：

  1. 树图的方向： layout、orient
  2. 子节点收起展开：initialTreeDepth、expandAndCollapse
  3. 叶子节点设置： leaves
  4. 操作设置：roam
  5. 线条：除了lineStyle可以调节线条外，还有edgeShape调节形状，edgeForkPosition调节树杈位置。

没有子节点的要叶子节点leave
在这里插入图片描述
树图中的data只能有一个数据

 let options = {tooltip: {show: true,},series: [{type: "tree",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述
layout：树图的布局，有 正交 和 径向 两种，默认情况下是’orthogonal’正交布局，'radial’是径向布局。

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "radial", //"orthogonal"data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述

orient:在 layout = ‘orthogonal’ 的时候，该配置项才生效，在水平方向的排列方式。
取值有’LR’ （从左到右）, ‘RL’（从右到左）, ‘TB’（从上到下）, ‘BT’（从下到上）。
initialTreeDepth：树图初始展开的层级（深度）。如果设置为 -1 或者 null 或者 undefined，所有节点都将展开。
expandAndCollapse：子树折叠和展开的交互，默认打开 。折叠后是否可以打开。

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "orthogonal", //"radial"orient: "BT",initialTreeDepth: 1,expandAndCollapse: true,data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],
};

在这里插入图片描述
roam:是否开启鼠标缩放和平移漫游。
叶子节点的设置
在这里插入图片描述

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "orthogonal", //"radial"orient: "BT",initialTreeDepth: 1,expandAndCollapse: true,roam: true,leaves: {label: {show: false,},},data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述
edgeShape:该配置项只在 正交布局 下有效。树图在 正交布局 下，边的形状
edgeForkPosition： 正交布局下当边的形状是折线时，子树中折线段分叉的位置。子节点在分叉处的位置

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "orthogonal", //"radial"orient: "BT",initialTreeDepth: 1,expandAndCollapse: true,roam: true,leaves: {label: {show: false,},},lineStyle: {color: "blue",},edgeShape: "polyline", // curveedgeForkPosition: "80%",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述

矩形树图

矩形树图强调包含关系，相对于树图，更能看出谁的占比大。

矩形树图内的矩形受itemStyle的调节。
矩形树图特有的属性：

  1. 矩形比例：squareRtio
  2. 子节点相关的： leafDepth,drillDownIcon
  3. 操作设置: roam,nodeClick
  4. 颜色相关的设置：colorAlpha,colorSaturation,colorMappingBy
  5. 过小数据隐藏：visibleMin,childrenVisibleMin
  6. 面包屑：breadcrumb
  7. 特殊的label:upperLabel
  8. 数据维度与levels-data里的value的数组写法,visualDimension

矩形数组必须有value

 let options = {tooltip: {show: true,},series: [{type: "treemap",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述
squareRatio:期望矩形长宽比率,将矩形比例设为1，并不一定就是正方形，只是往正方形的比例靠。

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述
leafDepth：下钻，设置初始展示的节点。
drillDownIcon：当节点可以下钻时的提示符。只能是字符。

默认情况下的下钻提示符
在这里插入图片描述
修改下钻提示符

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],
};

在这里插入图片描述
nodeClick: “link”, //点击节点后的行为false “zoomToNode”
colorAlpha: [0.3, 1],本系列默认的颜色透明度选取范围,data中的value越小，颜色就越透明。

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",nodeClick: "link", //点击节点后的行为false  "zoomToNode"colorAlpha: [0.3, 1],data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述
colorMappingBy：表示同一层级节点，在颜色列表中以什么样的方式选择color
breadcrumb:对面包屑的设置。

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",nodeClick: "link",colorAlpha: [0.3, 1],colorMappingBy: "value",breadcrumb: {show: false,},data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],
};

在这里插入图片描述
upperLabel 用于显示矩形的父节点的标签

在这里插入图片描述
visualDimension :支持对数据其他维度进行视觉映射。每个节点的 value 都可以是数组，visualDimension 指定使用的是数组的哪一项。
levels:可以对每个节点进行配置

let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",nodeClick: "link", //点击节点后的行为false  "zoomToNode"//   colorAlpha: [0.3, 1],colorMappingBy: "value",breadcrumb: {show: false,},upperLabel: {show: true,},// visualDimension: 1,levels: [{//给第一层配color: ["red"],},{//给第二层配color: ["yellow", "green"],},],data: [{name: "a",value: 10, // [10, 20]children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],};

在这里插入图片描述

关系图

关系图先通过data画出点，然后再通过links数组指定连接关系。
1.关系图的节点收symbol的调节
2.特殊的属性
关系图连线相关的 edgeSymbol,edgeSymbolSize,edgeLabel
布局相关的 layout, circular
操作相关 roam

let options = {tooltip: {show: true,},series: [{type: "graph",data: [{value: 10,name: "张三",x: 40,y: 40,},{value: 30,name: "李四",x: 50,y: 100,},{value: 20,name: "王五",x: 80,y: 40,},],links: [{source: "张三",target: "李四",},],},],};

在这里插入图片描述
然后将设置 xAxis，xAxis，指定坐标系，通过下表来连接


let options = {tooltip: {show: true,},xAxis: {type: "category",data: ["d1", "d2", "d3"],},yAxis: {},series: [{type: "graph",symbolSize: 20,coordinateSystem: "cartesian2d",data: [["d1", 20],["d2", 30],["d3", 50],],links: [{source: 0,target: 1,},],},],};

在这里插入图片描述

桑基图

用来表示流向的，可以看作是关系图的一种图形化表达，跟关系图一样，通过设置data来定义位置，然后用links连接代表流向。

桑基图的节点通过itemStyle来调节，桑基图的连接边受lineStyle调节。

特殊的属性：
朝向: orient
桑基矩形节点相关 nodeWidth,nodeGap

 let options = {tooltip: {show: true,},series: [{type: "sankey",data: [{name: "生产",},{name: "销售",},{name: "出口",},{name: "库存",},],links: [{source: "生产",target: "销售",value: 100,},{source: "生产",target: "出口",value: 50,},{source: "生产",target: "库存",value: 40,},],},],};

在这里插入图片描述
nodeWidth:桑基图中每个矩形节点的宽度
nodeGap:桑基图中每一列任意两个矩形节点之间的间隔

  let options = {tooltip: {show: true,},series: [{type: "sankey",orient: "vertical",nodeWidth: 50,nodeGap: 8,data: [{name: "生产",},{name: "销售",},{name: "出口",},{name: "库存",},],links: [{source: "生产",target: "销售",value: 100,},{source: "生产",target: "出口",value: 50,},{source: "生产",target: "库存",value: 40,},],},],};

在这里插入图片描述

日历图

日历图更像一种坐标系
calendar:日历坐标系组件
range:日历坐标的范围

 let options = {tooltip: {show: true,},calendar: {range: ["2024-5"],width: 300,height: 300,},series: [{}],};

在这里插入图片描述
日历图中的数据以graph关系图为例，可以是其他的图。

 let options = {tooltip: {show: true,},calendar: {range: ["2024-5"],width: 300,height: 380,orient: "vertical",},series: [{type: "graph",coordinateSystem: "calendar",data: [["2024-5-1", 10],["2024-5-4", 40],["2024-5-7", 20],["2024-5-11", 30],["2024-5-21", 10],["2024-5-22", 10],],links: [{source: 0,target: 1,},],},],};

在这里插入图片描述

这篇关于echarts-树图、关系图、桑基图、日历图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/999444。

相关文章

POJ1269 判断2条直线的位置关系

POJ1269 判断2条直线的位置关系

题目大意：给两个点能够确定一条直线，题目给出两条直线（由4个点确定），要求判断出这两条直线的关系：平行，同线，相交。如果相交还要求出交点坐标。 解题思路： 先判断两条直线p1p2, q1q2是否共线， 如果不是，再判断 直线 是否平行， 如果还不是， 则两直线相交。  判断共线：  p1p2q1 共线 且 p1p2q2 共线 ，共线用叉乘为 0  来判断，  判断 平行：  p1p
阅读更多...
pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

在 Python 开发中，管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等，都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools？ pip-tools 是一组命令行工具，旨在简化 Python 依赖关系的管理，确保项目环境的稳定性和可重复性。它主要包含两个核心工具：pip-compile 和 pip
阅读更多...
读软件设计的要素04概念的关系

读软件设计的要素04概念的关系

1. 概念的关系 1.1. 概念是独立的，彼此间无须相互依赖 1.1.1. 一个概念是应该独立地被理解、设计和实现的 1.1.2. 独立性是概念的简单性和可重用性的关键 1.2. 软件存在依赖性 1.2.1. 不是说一个概念需要依赖另一个概念才能正确运行 1.2.2. 只有当一个概念存在时，包含另一个概念才有意义 1.3. 概念依赖关系图简要概括了软件的概念和概念存在的理
阅读更多...
数据依赖基础入门：函数依赖与数据库设计的关系

数据依赖基础入门：函数依赖与数据库设计的关系

在数据库设计中，数据依赖 是一个重要的概念，它直接影响到数据库的结构和性能。函数依赖 作为数据依赖的一种，是规范化理论的基础，对数据库设计起着至关重要的作用。如果你是一名数据库设计的初学者，这篇文章将帮助你理解函数依赖及其在数据库设计中的应用。 什么是数据依赖？ 数据依赖 是指同一关系中属性间的相互依赖和制约关系，它是数据库设计中语义的体现。在现实世界中，数据之间往往存在某种依赖关系，而这
阅读更多...
c++ 和C语言的兼容性关系

c++ 和C语言的兼容性关系

C++ 和 C 语言有很高的兼容性，但也存在一些差异和限制。下面是它们的兼容性关系的详细介绍： 兼容性 C++ 是 C 的超集： C++ 语言设计为兼容 C 语言的语法和功能，大部分 C 代码可以在 C++ 编译器中编译运行。 标准库兼容性： C++ 标准库包含了 C 标准库的内容，如 stdio.h、stdlib.h、string.h 等头文件，但 C++ 的标准库也提供了额外的功能，如
阅读更多...
七、Maven继承和聚合关系、及Maven的仓库及查找顺序

七、Maven继承和聚合关系、及Maven的仓库及查找顺序

1.继承   2.聚合   3.Maven的仓库及查找顺序
阅读更多...
file-max与ulimit的关系与差别

file-max与ulimit的关系与差别

http://zhangxugg-163-com.iteye.com/blog/1108402 http://ilikedo.iteye.com/blog/1554822
阅读更多...
【编程底层原理】方法区、永久代和元空间之间的关系

【编程底层原理】方法区、永久代和元空间之间的关系

Java虚拟机（JVM）中的内存布局经历了几个版本的变更，其中方法区、永久代和元空间是这些变更中的关键概念。以下是它们之间的关系： 一、方法区： 1、方法区是JVM规范中定义的一个概念，它用于存储类信息、常量、静态变量、即时编译器编译后的代码等数据。 3、它是JVM运行时数据区的一部分，与堆内存一样，是所有线程共享的内存区域。 二、永久代（PermGen）： 1、在Java SE 7之前，
阅读更多...
笔记整理—内核！启动！—kernel部分（1）驱动与内核的关系

笔记整理—内核！启动！—kernel部分（1）驱动与内核的关系

首先，恭喜完成了uboot部分的内容整理，其次补充一点，uboot第一部分和第二部分的工作不是一定的，在不同的版本中，可能这个初始化早一点，那个的又放在了第二部分，版本不同，造成的工作顺序不同，但终归是要完成基本内容初始化并传参给kernel的。         那么至于驱动与内核的关系，用一张图来说明最适合不过：         驱动位于OS层的中下层与硬件相接。驱动是内
阅读更多...
一、关系模型和关系代数，《数据库系统概念》，原书第7版

一、关系模型和关系代数，《数据库系统概念》，原书第7版

文章目录 @[toc]一、引言1.1 什么是数据库1.2 数据完整性1.3 数据库的操作1.4 数据库的持久性1.5 数据库管理系统1.6 数据模型1.7 早期DBMS 二、关系模型2.1 什么是关系模型2.2 关系数据库的结构2.3 键2.4 约束2.5 数据操纵语言(DML)2.6 关系代数2.6.1 选择运算2.6.2 投影运算2.6.3 合并运算2.6.4 交运算2.6.5 差运算2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2