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,},],},],};

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/15522.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

告别 Dart 中的 Future.wait([])

告别 Dart 中的 Future.wait([])

作为 Dart 开发人员&#xff0c;我们对异步编程和 Futures 的强大功能并不陌生。过去&#xff0c;当我们需要同时等待多个 future 时&#xff0c;我们依赖 Future.wait([]) 方法&#xff0c;该方法返回一个 List<T>。然而&#xff0c;这种方法有一个显着的缺点&#xff1…
阅读更多...
2、xss-labs之level2

2、xss-labs之level2

1、打开页面 2、传入xss代码 payload&#xff1a;<script>alert(xss)</script>&#xff0c;发现返回<script>alert(xss)</script> 3、分析原因 打开f12&#xff0c;没什么发现 看后端源码&#xff0c;在这form表单通过get获取keyword的值赋给$str&am…
阅读更多...
跑大模型的经验

跑大模型的经验

LLama2: 1. 使用torchrun来跑&#xff1a; torchrun --nproc_per_node 1 example_text_completion.py \--ckpt_dir llama-2-7b/ \--tokenizer_path tokenizer.model \--max_seq_len 128 --max_batch_size 4 关于集群分布式torchrun命令踩坑记录&#xff08;自用&#xff09;…
阅读更多...
【Vue】input框自动聚焦且输入验证码后跳至下一位

【Vue】input框自动聚焦且输入验证码后跳至下一位

场景&#xff1a;PC端 样式&#xff1a; <div class"verification-code-input"><input v-model"code[index]" v-for"(_, index) in 5" :key"index" type"text" maxlength"1" input"handleInput(i…
阅读更多...
渲染管线——应用阶段

渲染管线——应用阶段

知识必备——CPU和GPU 应用阶段都做了什么 应用阶段为渲染准备了什么 1.把不可见的数据剔除 2.准备好模型相关数据&#xff08;顶点、法线、切线、贴图、着色器等等&#xff09; 3.将数据加载到显存中 4.设置渲染状态&#xff08;设置网格需要使用哪个着色器、材质、光源属性等…
阅读更多...
说些什么好呢

说些什么好呢

大一&#xff1a;提前学C和C。学完语法去洛谷或者Acwing二选一&#xff0c;刷300道左右题目。主要培养编程思维&#xff0c;让自己的逻辑能够通过代码实现出来。 现在对算法有点感兴趣但是没有天赋&#xff0c;打不了acm&#xff0c;为就业做准备咯。 大二(算法竞赛)&#xff1…
阅读更多...
常用损失函数学习

常用损失函数学习

损失函数&#xff08;Loss Function&#xff09;&#xff0c;在机器学习和统计学中&#xff0c;是用来量化模型预测输出与真实结果之间差异的函数。简而言之&#xff0c;损失函数衡量了模型预测的好坏&#xff0c;目标是通过最小化这个函数来优化模型参数&#xff0c;从而提高预…
阅读更多...
简述js的事件循环以及宏任务和微任务

简述js的事件循环以及宏任务和微任务

前言 在JavaScript中&#xff0c;任务被分为同步任务和异步任务。 同步任务&#xff1a;这些任务在主线程上顺序执行&#xff0c;不会进入任务队列&#xff0c;而是直接在主线程上排队等待执行。每个同步任务都会阻塞后续任务的执行&#xff0c;直到它自身完成。常见的同步任…
阅读更多...
【机器学习】机器学习与大型预训练模型的前沿探索：跨模态理解与生成的新纪元

【机器学习】机器学习与大型预训练模型的前沿探索：跨模态理解与生成的新纪元

&#x1f512;文章目录&#xff1a; &#x1f4a5;1.引言 ☔2.跨模态理解与生成技术概述 &#x1f6b2;3.大型预训练模型在跨模态理解与生成中的应用 &#x1f6f4;4.前沿探索与挑战并存 &#x1f44a;5.未来趋势与展望 &#x1f4a5;1.引言 近年来&#xff0c;机器学习领…
阅读更多...
著名书法家王杰宝做客央视频《笔墨写人生》艺坛人物经典访谈节目

著名书法家王杰宝做客央视频《笔墨写人生》艺坛人物经典访谈节目

印象网北京讯&#xff08;张春兄、冯爱云&#xff09;展示艺术风采&#xff0c;构建时代精神。5月25日&#xff0c;著名书法家、羲之文化传承人王杰宝&#xff0c;做客央视频《笔墨写人生》艺坛人物经典访谈节目&#xff0c;与中央电视台纪录频道主持人姚文倩一起&#xff0c;分…
阅读更多...
MyBatis 中的动态 SQL 的相关使用方法(Javaee/MyBatis)

MyBatis 中的动态 SQL 的相关使用方法(Javaee/MyBatis)

MyBatis 的动态 SQL 是一种强大的特性&#xff0c;它可以让你在 XML 映射文件内&#xff0c;根据不同的条件编写不同的 SQL 语句。MyBatis 动态 SQL 主要元素有&#xff1a; <if>: 根据提供的条件来动态拼接 SQL。 接口定义 Integer insertUserByCondition(UserInfo u…
阅读更多...
c++ list容器

c++ list容器

std::list 是 C 标准库中的一个双向链表容器。与 std::vector&#xff08;动态数组&#xff09;和 std::deque&#xff08;双端队列&#xff09;不同&#xff0c;std::list 的元素在内存中不是连续存储的&#xff0c;而是分散存储并通过节点进行连接。这使得 std::list 在插入和…
阅读更多...
SpringBoot 集成 ChatGPT（附实战源码）

SpringBoot 集成 ChatGPT（附实战源码）

建项目 项目结构 application.properties openai.chatgtp.modelgpt-3.5-turbo openai.chatgtp.api.keyREPLACE_WITH_YOUR_API_KEY openai.chatgtp.api.urlhttps://api.openai.com/v1/chat/completionsopenai.chatgtp.max-completions1 openai.chatgtp.temperature0 openai.cha…
阅读更多...
全局平均池化笔记

全局平均池化笔记

全局平均池化&#xff08;Global Average Pooling, GAP&#xff09;是一种用于卷积神经网络&#xff08;CNN&#xff09;中的池化操作&#xff0c;其主要作用和优点包括&#xff1a; 减少参数数量&#xff1a;全局平均池化层将每个特征图通过取其所有元素的平均值&#xff0c;压…
阅读更多...
ubuntu安装yum方法【最新可用】

ubuntu安装yum方法【最新可用】

一、安装命令 在根目录&#xff08;root&#xff09;下执行 sudo apt-get install build-essential sudo apt-get install yum二、出错处理 1、E: Package yum has no installation candidate 解决&#xff1a;更换镜像源&#xff0c;找到自己的系统版本用vim进行更换&#xff…
阅读更多...
make是什么

make是什么

make是什么工具 make是一个自动化编译工具，它本身并没有编译和链接的功能，而是用类似于批处理的方式——通过makefile文件中指示的依赖关系，调用makefile文件中使用的命令来完成编译和链接的。makefile文件中记录了源代码文件之间的依赖关系，并说明了如何编译各个源代码文…
阅读更多...
GmSSL3.X编译iOS和Android动态库

GmSSL3.X编译iOS和Android动态库

一、环境准备 我用的Mac电脑编译&#xff0c;Xcode版本15.2&#xff0c;安卓的NDK版本是android-ndk-r21e。 1.1、下载国密源码 下载最新的国密SDK源码到本地。 1.2、安装Xcode 前往Mac系统的AppStore下载安装最新Xcode。 1.3、安卓NDK下载 下载NDK到本地&#xff0c;选…
阅读更多...
Protobuf - 语法、字段使用规则、注意事项

Protobuf - 语法、字段使用规则、注意事项

目录 前言 一、Protobuf 基本语法 1.1、Protoc 版本 1.2、文件格式配置 1.3、消息字段规则 1.3.1、字段数据类型 1.3.2、字段修饰规则 1.3.3、消息类型定义 1.3.4、enum 类型 1.3.5、Any 类型 1.3.6、oneof 类型 1.3.7、map 类型 1.3.8、默认值 1.3.9、更新消息…
阅读更多...
css设置文字在固定宽度中等距分开（仅限于单行文本）

css设置文字在固定宽度中等距分开（仅限于单行文本）

一、要实现的效果&#xff1a; 二、代码 要在CSS中设置文本在一个固定宽度的容器中等距分开&#xff0c; 可以使用text-align: justify;属性&#xff0c;它可以让文本两端对齐&#xff0c;看起来就像是等距分开的。 但是要注意&#xff0c;单独使用text-align:justify;只能对单…
阅读更多...
机器学习 - 模型训练

机器学习 - 模型训练

机器学习&#xff08;Machine Learning&#xff0c;ML&#xff09;是利用计算机算法和统计模型&#xff0c;使计算机系统在没有明确编程的情况下执行特定任务的过程。机器学习的整个过程可以分为以下几个主要步骤&#xff1a; 训练步骤 问题定义与需求分析 目标设定&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023