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

server/2024/9/24 6:47:58/

树图

树图主要用来表达关系结构。
树图的端点也收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,},],},],};

在这里插入图片描述


http://www.ppmy.cn/server/43023.html

相关文章

最小生成树

目录 1.生成树2.最小生成树3.求出最小生成树3.1.破圆法3.2.kruskal3.2.1题目类型 1.生成树 对于一张无向连通图G,它的一个连通子图,含有图中全部n个顶点,但只有足以构成一棵树的n-1条边,那么就称这个子图为G的生成树 2.最小生成树 边的权值…

缓存IO与直接IO

IO类型 缓存 I/O 缓存 I/O 又被称作标准 I/O,大多数文件系统的默认 I/O 操作都是缓存 I/O。在 Linux 的缓存 I/O 机制中,数据先从磁盘复制到内核空间的缓冲区,然后从内核空间缓冲区复制到应用程序的地址空间(用户空间&#xff0…

输入一串字符,输入想要字符串前*的个数n,判断字符串前*的个数是大于n还是小于n,如果大于n则删除多余的*其它保持不变,如果小于n,则字符串也保持不变

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> void fun(char* a, int n) {int i 0, j 0, m 0,b0,c0;char* p;p a;//第一步&#xff0c;判断字母前面有多少个*while (p[i] *){j;}printf("字母前*的个数%d\n",j);//求总的字符串长度while (a[m] !…

R语言数据分析案例框架

。 R语言数据分析案例框架 1. 案例背景 假设我们是一家电商公司的数据分析师&#xff0c;公司最近推出了一系列促销活动&#xff0c;我们希望通过分析销售数据来评估这些活动的效果。 2. 数据准备 数据来源&#xff1a;从公司数据库中获取销售数据。数据清洗&#xff1a;去…

AcW木棒-XMUOJ恢复破碎的符咒木牌-DFS与剪枝

题目 思路 话不多说&#xff0c;直接上代码 代码 /* AcW木棒-XMUOJ恢复破碎的符咒木牌 搜索顺序&#xff1a;从小到大枚举最终的长度 len从前往后依次拼每根长度为len的木棍 优化&#xff1a; 1.优化搜索顺序&#xff1a;优先选择深度短的来搜索&#xff0c;故从大到小去枚…

Linux网络编程:HTTP协议

前言&#xff1a; 我们知道OSI模型上层分为应用层、会话层和表示层&#xff0c;我们接下来要讲的是主流的应用层协议HTTP&#xff0c;为什么需要这个协议呢&#xff0c;因为在应用层由于操作系统的不同、开发人员使用的语言类型不同&#xff0c;当我们在传输结构化数据时&…

XILINX FPGA DDR 学习笔记(一)

DDR 内存的本质是数据的存储器&#xff0c;首先回到数据的存储上&#xff0c;数据在最底层的表现是地址。为了给每个数据进行存放并且在需要的时候读取这个数据&#xff0c;需要对数据在哪这个抽象的概念进行表述&#xff0c;我们科技树发展过程中把数据在哪用地址表示。一个数…

JVM-调优之-高内存占用问题排查

排查思路 1&#xff09;检查jvm内存的分配情况 2&#xff09;检查jvm的gc情况 3&#xff09; 找出占用量比较大的对象 第一步&#xff1a;jmap -heap PID 查看jvm内存使用情况 jmap -heap 2525 可以看到老年代年轻代等其他内存区域内存使用率百分比 第二步&#xff1a;jsta…