Echarts tutorial on how to implement tree charts
|
Treemaps are mainly used to visualize tree-like data structures and are a special type of hierarchy. To implement this, set series->type to tree. Echarts' tree chart can be orthogonal or radial. Orthogonal tree:
Radial Tree:
To implement this, modify the series->layout settings, orthogonal for positive direction, radial for radial direction. Can be customized, such as from right to left:
To implement this, modify the series->orient setting to support LR, RL, TB, and BT, where RL means from right to left. Customizable icons: support 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' Implementation method: modify: series->symbol settings The icon is a square tree diagram:
Can be customized, straight line or curve: Implementation method: Modify series->edgeShape settings to support curve and polyline Straight Line Chart:
initialTreeDepth: The default expansion depth is 2. Nodes with more than 2 layers can be displayed or hidden by clicking the parent node. If set to -1 or null or undefined, all nodes will be expanded. itemStyle: Modify the style of the tree chart items. You can modify the color, size, etc. label: Handling of text in chart items. You can use formatter to add rich effects to the text of the chart. lineStyle: Processing of the chart centerline. The effect of modifying the lineStyle style:
emphasis: Focus. After setting the focus, when the mouse is placed on an item, other irrelevant items will be temporarily hidden. 'none' does not fade out other graphics. This configuration is used by default. 'self' focuses (does not fade) only the graph of the currently highlighted data. 'series' focuses all graphs of the series containing the currently highlighted data. 'ancestor' focuses on all ancestor nodes 'descendant' focuses on all descendant nodes
emphasis:
focus: 'ancestor',
blurScope: 'coordinateSystem'
}
Data structure of tree diagram: name: The default name of the chart item. children: child nodes of this item Of course, you can define any attributes in the data, such as value, num, etc., and use the formatter in the label to achieve richer display effects. Finally, the complete code: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts Example - Legend</title>
<script src="../../echarts.js"></script>
</head>
<body>
<div id="container" style="width: 500px;height:500px;">
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
var chart = echarts.init(document.getElementById("container"));
var data = {
name: 'Throwable',
children: [{
name: 'Error',
children: [{
name: 'VirtualMachineError',
children: [{
name: 'StackOverflowError'
}, {
name: 'OutOfMemoryError'
}]
}, {
name: 'AWTError'
}]
}, {
name: 'Exception'
}]
}
var data2 = {
name: 'Dragon Ball Characters',
children: [{
name: 'Sun Wukong'
}, {
name: 'Bulma'
}, {
name: 'Zhu Wuneng'
}, {
name: 'Yamucha'
}, {
name: 'Turtle Hermit'
}, {
name: 'Xiao Lin'
}, {
name: 'Piccolo'
}, {
name: 'Crane Immortal'
}, {
name: 'Tianjin Rice'
}, {
name: 'dumplings'
}]
}
chart.setOption({
title:
text: 'Java exception structure diagram'
},
series: [{
layout: 'orthogonal',
data: [data],
right: '60%',
type: 'tree',
edgeShape: 'polyline', // curve and polyline
symbol: 'rect', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',
initialTreeDepth: 2,
itemStyle: {
color: 'cyan'
},
lineStyle:
color: 'red'
},
/**
*
*
* 'none' does not fade out other graphics. This configuration is used by default.
'self' focuses (does not fade) only the graph of the currently highlighted data.
'series' focuses all graphs of the series containing the currently highlighted data.
'ancestor' focuses on all ancestor nodes 'descendant' focuses on all descendant nodes */
emphasis:
focus: 'ancestor',
blurScope: 'coordinateSystem'
},
}, {
layout: 'radial',
left: '60%',
data: [data2],
type: 'tree',
symbol: 'rect',
symbolSize: 15
}]
})
Summarize This is the end of this article about the implementation of tree charts in the Echarts example tutorial. For more relevant content about implementing tree charts in Echarts, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of samba folder sharing server configuration under centos
>>: Specific use of Linux which command
Recommend
Graphic tutorial on configuring log server in Linux
Preface This article mainly introduces the releva...
How to enable Swoole Loader extension on Linux system virtual host
Special note: Only the Swoole extension is instal...
Summary of MySQL 8.0 memory-related parameters
Theoretically, the memory used by MySQL = global ...
Research on the effect of page sidebar realized by JS
Table of contents Discover: Application of displa...
Detailed explanation of screen command usage in Linux
GUN Screen: Official website: http://www.gnu.org/...
Mysql solution to improve the efficiency of copying large data tables
Preface This article mainly introduces the releva...
Enter two numbers in html to realize addition, subtraction, multiplication and division functions
1. parseFloat() function Make a simple calculator...
What is dns-prefetch? Front-end optimization: DNS pre-resolution improves page speed
Table of contents Background 1. What is dns-prefe...
15 Linux Command Aliases That Will Save You Time
Preface In the process of managing and maintainin...
How to use bar charts in Vue and modify the configuration yourself
1. Import echart in HTML file <!-- Import echa...
Write a mysql data backup script using shell
Ideas It's actually very simple Write a shell...
Solve the problem that the repository and tag names are both none after Docker loads a new image
You can use the command: docker tag [image id] [n...
Vue simulates the shopping cart settlement function
This article example shares the specific code of ...
JavaScript uses setTimeout to achieve countdown effect
In order to enhance the ability to write JavaScri...
Summary of Linux sftp command usage
sftp is the abbreviation of Secure File Transfer ...