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.pswp.cn/bicheng/15522.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/15522.shtml
英文地址，請注明出處：http://en.pswp.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