Echarts tree树图按层级自定义容器宽高及显示隐藏层级后重新渲染树图宽高

最新推荐文章于 2023-06-22 23:26:35 发布
最新推荐文章于 2023-06-22 23:26:35 发布
阅读量1.4k 收藏 5
点赞数 1
分类专栏： 插件 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hs1219462412/article/details/127785116
版权
此代码示例展示了如何使用Echarts库创建一个树形图，并根据树的高度动态调整图表的宽度和高度。在React组件中，通过`useEffect`和`resize`函数监听并响应树数据的变化，以实现图表的自适应布局。数据结构为flare分析的示例，包含了多个层级和节点。点击节点时，图表会重新调整大小以适应新的展开状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

import React, { useState, useEffect } from 'react';
import * as echarts from 'echarts';

export default function index() {
	const [containerHeight, setContainerHeight] = useState(800);
	useEffect(() => {
		modelCenterTree();
	}, []);

	const resize = (myChart) => {
		const elesArr = Array.from(
			new Set(myChart._chartsViews[0]._data._graphicEls),
		);
		const dep = myChart._chartsViews[0]._data.tree.root.height; // 获取树高

		const layerHeight = 200; // 层级之间的高度
		const currentHeight = layerHeight * (dep + 1) || layerHeight;
		const newHeight = Math.max(currentHeight, layerHeight);
		const chartHeight = newHeight; // 树高

		const layerWidth = 50; // 兄弟节点之间的距离
		const currentWidth = layerWidth * (elesArr.length - 1) || layerWidth;
		const newWidth = Math.max(currentWidth, layerWidth);
		const chartWidth = newWidth; // 树宽

		setContainerHeight(chartWidth);
		setTimeout(() => {
			myChart.resize();
		}, 350);
	};

	const modelCenterTree = () => {
		const data = {
			name: 'flare',
			children: [
				{
					name: 'analytics',
					children: [
						{
							name: 'cluster',
							children: [
								{ name: 'AgglomerativeCluster', value: 3938 },
								{ name: 'CommunityStructure', value: 3812 },
								{ name: 'HierarchicalCluster', value: 6714 },
								{ name: 'MergeEdge', value: 743 },
							],
						},
						{
							name: 'graph',
							children: [
								{ name: 'BetweennessCentrality', value: 3534 },
								{ name: 'LinkDistance', value: 5731 },
								{ name: 'MaxFlowMinCut', value: 7840 },
								{ name: 'ShortestPaths', value: 5914 },
								{ name: 'SpanningTree', value: 3416 },
							],
						},
						{
							name: 'optimization',
							children: [{ name: 'AspectRatioBanker', value: 7074 }],
						},
					],
				},

				{
					name: 'animate',
					children: [
						{ name: 'Easing', value: 17010 },
						{ name: 'FunctionSequence', value: 5842 },
						{
							name: 'interpolate',
							children: [
								{ name: 'ArrayInterpolator', value: 1983 },
								{ name: 'ColorInterpolator', value: 2047 },
								{ name: 'DateInterpolator', value: 1375 },
								{ name: 'Interpolator', value: 8746 },
								{ name: 'MatrixInterpolator', value: 2202 },
								{ name: 'NumberInterpolator', value: 1382 },
								{ name: 'ObjectInterpolator', value: 1629 },
								{ name: 'PointInterpolator', value: 1675 },
								{ name: 'RectangleInterpolator', value: 2042 },
							],
						},
						{ name: 'ISchedulable', value: 1041 },
						{ name: 'Parallel', value: 5176 },
						{ name: 'Pause', value: 449 },
						{ name: 'Scheduler', value: 5593 },
						{ name: 'Sequence', value: 5534 },
						{ name: 'Transition', value: 9201 },
						{ name: 'Transitioner', value: 19975 },
						{ name: 'TransitionEvent', value: 1116 },
						{ name: 'Tween', value: 6006 },
					],
				},
				{
					name: 'data',
					children: [
						{
							name: 'converters',
							children: [
								{ name: 'Converters', value: 721 },
								{ name: 'DelimitedTextConverter', value: 4294 },
								{ name: 'GraphMLConverter', value: 9800 },
								{ name: 'IDataConverter', value: 1314 },
								{ name: 'JSONConverter', value: 2220 },
							],
						},
						{ name: 'DataField', value: 1759 },
						{ name: 'DataSchema', value: 2165 },
						{ name: 'DataSet', value: 586 },
						{ name: 'DataSource', value: 3331 },
						{ name: 'DataTable', value: 772 },
						{ name: 'DataUtil', value: 3322 },
					],
				},
				{
					name: 'display',
					children: [
						{ name: 'DirtySprite', value: 8833 },
						{ name: 'LineSprite', value: 1732 },
						{ name: 'RectSprite', value: 3623 },
						{ name: 'TextSprite', value: 10066 },
					],
				},
				{
					name: 'flex',
					children: [{ name: 'FlareVis', value: 4116 }],
				},
				{
					name: 'physics',
					children: [
						{ name: 'DragForce', value: 1082 },
						{ name: 'GravityForce', value: 1336 },
						{ name: 'IForce', value: 319 },
						{ name: 'NBodyForce', value: 10498 },
						{ name: 'Particle', value: 2822 },
						{ name: 'Simulation', value: 9983 },
						{ name: 'Spring', value: 2213 },
						{ name: 'SpringForce', value: 1681 },
					],
				},
				{
					name: 'query',
					children: [
						{ name: 'AggregateExpression', value: 1616 },
						{ name: 'And', value: 1027 },
						{ name: 'Arithmetic', value: 3891 },
						{ name: 'Average', value: 891 },
						{ name: 'BinaryExpression', value: 2893 },
						{ name: 'Comparison', value: 5103 },
						{ name: 'CompositeExpression', value: 3677 },
						{ name: 'Count', value: 781 },
						{ name: 'DateUtil', value: 4141 },
						{ name: 'Distinct', value: 933 },
						{ name: 'Expression', value: 5130 },
						{ name: 'ExpressionIterator', value: 3617 },
						{ name: 'Fn', value: 3240 },
						{ name: 'If', value: 2732 },
						{ name: 'IsA', value: 2039 },
						{ name: 'Literal', value: 1214 },
						{ name: 'Match', value: 3748 },
						{ name: 'Maximum', value: 843 },
						{
							name: 'methods',
							children: [
								{ name: 'add', value: 593 },
								{ name: 'and', value: 330 },
								{ name: 'average', value: 287 },
								{ name: 'count', value: 277 },
								{ name: 'distinct', value: 292 },
								{ name: 'div', value: 595 },
								{ name: 'eq', value: 594 },
								{ name: 'fn', value: 460 },
								{ name: 'gt', value: 603 },
								{ name: 'gte', value: 625 },
								{ name: 'iff', value: 748 },
								{ name: 'isa', value: 461 },
								{ name: 'lt', value: 597 },
								{ name: 'lte', value: 619 },
								{ name: 'max', value: 283 },
								{ name: 'min', value: 283 },
								{ name: 'mod', value: 591 },
								{ name: 'mul', value: 603 },
								{ name: 'neq', value: 599 },
								{ name: 'not', value: 386 },
								{ name: 'or', value: 323 },
								{ name: 'orderby', value: 307 },
								{ name: 'range', value: 772 },
								{ name: 'select', value: 296 },
								{ name: 'stddev', value: 363 },
								{ name: 'sub', value: 600 },
								{ name: 'sum', value: 280 },
								{ name: 'update', value: 307 },
								{ name: 'variance', value: 335 },
								{ name: 'where', value: 299 },
								{ name: 'xor', value: 354 },
								{ name: '-', value: 264 },
							],
						},
						{ name: 'Minimum', value: 843 },
						{ name: 'Not', value: 1554 },
						{ name: 'Or', value: 970 },
						{ name: 'Query', value: 13896 },
						{ name: 'Range', value: 1594 },
						{ name: 'StringUtil', value: 4130 },
						{ name: 'Sum', value: 791 },
						{ name: 'Variable', value: 1124 },
						{ name: 'Variance', value: 1876 },
						{ name: 'Xor', value: 1101 },
					],
				},
				{
					name: 'scale',
					children: [
						{ name: 'IScaleMap', value: 2105 },
						{ name: 'LinearScale', value: 1316 },
						{ name: 'LogScale', value: 3151 },
						{ name: 'OrdinalScale', value: 3770 },
						{ name: 'QuantileScale', value: 2435 },
						{ name: 'QuantitativeScale', value: 4839 },
						{ name: 'RootScale', value: 1756 },
						{ name: 'Scale', value: 4268 },
						{ name: 'ScaleType', value: 1821 },
						{ name: 'TimeScale', value: 5833 },
					],
				},
				{
					name: 'util',
					children: [
						{ name: 'Arrays', value: 8258 },
						{ name: 'Colors', value: 10001 },
						{ name: 'Dates', value: 8217 },
						{ name: 'Displays', value: 12555 },
						{ name: 'Filter', value: 2324 },
						{ name: 'Geometry', value: 10993 },
						{
							name: 'heap',
							children: [
								{ name: 'FibonacciHeap', value: 9354 },
								{ name: 'HeapNode', value: 1233 },
							],
						},
						{ name: 'IEvaluable', value: 335 },
						{ name: 'IPredicate', value: 383 },
						{ name: 'IValueProxy', value: 874 },
						{
							name: 'math',
							children: [
								{ name: 'DenseMatrix', value: 3165 },
								{ name: 'IMatrix', value: 2815 },
								{ name: 'SparseMatrix', value: 3366 },
							],
						},
						{ name: 'Maths', value: 17705 },
						{ name: 'Orientation', value: 1486 },
						{
							name: 'palette',
							children: [
								{ name: 'ColorPalette', value: 6367 },
								{ name: 'Palette', value: 1229 },
								{ name: 'ShapePalette', value: 2059 },
								{ name: 'SizePalette', value: 2291 },
							],
						},
						{ name: 'Property', value: 5559 },
						{ name: 'Shapes', value: 19118 },
						{ name: 'Sort', value: 6887 },
						{ name: 'Stats', value: 6557 },
						{ name: 'Strings', value: 22026 },
					],
				},
				{
					name: 'vis',
					children: [
						{
							name: 'axis',
							children: [
								{ name: 'Axes', value: 1302 },
								{ name: 'Axis', value: 24593 },
								{ name: 'AxisGridLine', value: 652 },
								{ name: 'AxisLabel', value: 636 },
								{ name: 'CartesianAxes', value: 6703 },
							],
						},
						{
							name: 'controls',
							children: [
								{ name: 'AnchorControl', value: 2138 },
								{ name: 'ClickControl', value: 3824 },
								{ name: 'Control', value: 1353 },
								{ name: 'ControlList', value: 4665 },
								{ name: 'DragControl', value: 2649 },
								{ name: 'ExpandControl', value: 2832 },
								{ name: 'HoverControl', value: 4896 },
								{ name: 'IControl', value: 763 },
								{ name: 'PanZoomControl', value: 5222 },
								{ name: 'SelectionControl', value: 7862 },
								{ name: 'TooltipControl', value: 8435 },
							],
						},
						{
							name: 'data',
							children: [
								{ name: 'Data', value: 20544 },
								{ name: 'DataList', value: 19788 },
								{ name: 'DataSprite', value: 10349 },
								{ name: 'EdgeSprite', value: 3301 },
								{ name: 'NodeSprite', value: 19382 },
								{
									name: 'render',
									children: [
										{ name: 'ArrowType', value: 698 },
										{ name: 'EdgeRenderer', value: 5569 },
										{ name: 'IRenderer', value: 353 },
										{ name: 'ShapeRenderer', value: 2247 },
									],
								},
								{ name: 'ScaleBinding', value: 11275 },
								{ name: 'Tree', value: 7147 },
								{ name: 'TreeBuilder', value: 9930 },
							],
						},
						{
							name: 'events',
							children: [
								{ name: 'DataEvent', value: 2313 },
								{ name: 'SelectionEvent', value: 1880 },
								{ name: 'TooltipEvent', value: 1701 },
								{ name: 'VisualizationEvent', value: 1117 },
							],
						},
						{
							name: 'legend',
							children: [
								{ name: 'Legend', value: 20859 },
								{ name: 'LegendItem', value: 4614 },
								{ name: 'LegendRange', value: 10530 },
							],
						},

						{
							name: 'operator',
							children: [
								{
									name: 'distortion',
									children: [
										{ name: 'BifocalDistortion', value: 4461 },
										{ name: 'Distortion', value: 6314 },
										{ name: 'FisheyeDistortion', value: 3444 },
									],
								},
								{
									name: 'encoder',
									children: [
										{ name: 'ColorEncoder', value: 3179 },
										{ name: 'Encoder', value: 4060 },
										{ name: 'PropertyEncoder', value: 4138 },
										{ name: 'ShapeEncoder', value: 1690 },
										{ name: 'SizeEncoder', value: 1830 },
									],
								},
								{
									name: 'filter',
									children: [
										{ name: 'FisheyeTreeFilter', value: 5219 },
										{ name: 'GraphDistanceFilter', value: 3165 },
										{ name: 'VisibilityFilter', value: 3509 },
									],
								},
								{ name: 'IOperator', value: 1286 },
								{
									name: 'label',
									children: [
										{ name: 'Labeler', value: 9956 },
										{ name: 'RadialLabeler', value: 3899 },
										{ name: 'StackedAreaLabeler', value: 3202 },
									],
								},
								{
									name: 'layout',
									children: [
										{ name: 'AxisLayout', value: 6725 },
										{ name: 'BundledEdgeRouter', value: 3727 },
										{ name: 'CircleLayout', value: 9317 },
										{ name: 'CirclePackingLayout', value: 12003 },
										{ name: 'DendrogramLayout', value: 4853 },
										{ name: 'ForceDirectedLayout', value: 8411 },
										{ name: 'IcicleTreeLayout', value: 4864 },
										{ name: 'IndentedTreeLayout', value: 3174 },
										{ name: 'Layout', value: 7881 },
										{ name: 'NodeLinkTreeLayout', value: 12870 },
										{ name: 'PieLayout', value: 2728 },
										{ name: 'RadialTreeLayout', value: 12348 },
										{ name: 'RandomLayout', value: 870 },
										{ name: 'StackedAreaLayout', value: 9121 },
										{ name: 'TreeMapLayout', value: 9191 },
									],
								},
								{ name: 'Operator', value: 2490 },
								{ name: 'OperatorList', value: 5248 },
								{ name: 'OperatorSequence', value: 4190 },
								{ name: 'OperatorSwitch', value: 2581 },
								{ name: 'SortOperator', value: 2023 },
							],
						},
						{ name: 'Visualization', value: 16540 },
					],
				},
			],
		};

		const chartDom = document.getElementById('main');
		const myChart = echarts.init(chartDom);
		let option;

		data.children.forEach(function (datum, index) {
			index % 2 === 0 && (datum.collapsed = true);
		});

		console.log(data, 'data');

		myChart.setOption(
			(option = {
				tooltip: {
					trigger: 'item',
					triggerOn: 'mousemove',
				},
				series: [
					{
						type: 'tree',
						id: 0,
						data: [data],
						top: '0%',
						left: '10%',
						bottom: '0%',
						right: '10%',
						symbol: 'Rect',
						symbolSize: function (value, params) {
							const h = 30 + 15 * parseInt(params.name.length / 15);
							return [180, h];
						},
						symbolOffset: [0, 0],
						edgeShape: 'polyline',
						edgeForkPosition: '50%',
						initialTreeDepth: 2, // 默认展示层级深度
						itemStyle: {
							color: '#FFF',
							borderColor: 'rgb(4, 160, 255)',
							borderWidth: 2,
						},
						lineStyle: {
							width: 1,
						},
						label: {
							position: 'inside',
							verticalAlign: 'middle',
							align: 'center',
							// 第二步模型的文本样式
							formatter: function (value) {
								const name = value.name.replace(/[\r\n]/g, '');
								let str = '';
								const len = name.length;
								if (len > 15) {
									let isLast = false;

									for (let i = 0; i < len; i++) {
										if (name[i] === '（' && i % 15 !== 0) {
											str += '\n';
											isLast = true;
										}
										str += name[i];
										if ((i + 1) % 15 === 0 && !isLast) {
											str += '\n';
										}
									}
								} else {
									str = name;
								}

								// 有children，增加可展开icon
								if (value.data.children && value.data.children.length > 0) {
									str = '+ ' + str;
								}

								return str;
							},
						},
						emphasis: {
							itemStyle: {
								color: '#FFF',
								borderColor: 'rgb(4, 160, 255)',
								shadowColor: 'rgba(4, 160, 255, 0.7)',
								shadowBlur: 5,
							},
						},
						expandAndCollapse: true,
						// animationDuration: 550,
						// animationDurationUpdate: 750,
					},
				],
			}),
		);

		myChart.on('click', (params) => {
			console.log(params, 'params');
			resize(myChart);
		});

		option && myChart.setOption(option, true);
		resize(myChart);
	};

	return (
		<div
			id="main"
			style={{ height: containerHeight, overflow: 'hidden' }}
		></div>
	);
}
echarts 树图样式美化_echarts2 tree树图自定义显示缩放大小、位置
weixin_42299396的博客
01-13 3159
<>看到网上关于echarts tree的资料有点少，做项目恰巧遇到这个，把一些获得分享给大家。从echarts、官方API中我们似乎只能定义根节点的位置，并不能指定树图整体的大小以及其整体在dom显示的位置，在tree生成过程中只是以根节点向下方左右两边扩展。从echarts官网提供的API我们可以知道var chart = echarts.init(dom); chart.getZ...
【Echarts】基于Echarts4.0修改树图连接线(由曲线转为直角线)
dkz97的博客
12-02 8276
树图连接线曲线改为直角线 前言 Echarts (http://echarts.baidu.com/)是百度公司出品的一个开源制作图标的js插件，可以说是百度不可多得的良心产品了。我写这篇文章的时候是19年的11月。echarts已经出到4.x的版本，想要更深入了解echarts以及下载echarts的话，直接百度就可以去官网或者github上下载了。 问题/需求 直接进入主题，至于要写这篇文章，...
echarts自定义树状图，且每个系列柱子数不一
04-11
echarts自定义柱状图的形式，根据数据格式，横轴为多个系列项，每个系列项拥有的柱子数量不等，可自动计算柱子数量等分宽度显示。
echarts树图
start_XUEBA的博客
11-18 2448
用echarts做了两周(算上之前应该是4周)的树图，记录一下遇到的一些特性和问题。 特性： 1、echarts中绑定事件，通过 on方法 例如：绑定click方法 myChart.on('click', function (params) { console.log(params); }); 2、echarts的 on方法 先于 DOM点击事件执行。 3、echarts实例的 _chartsViews[0]._data 有很多有用的属性。 4、改变图表尺寸，在容器大小发生改变时需要
echarts--树图实现自定义图标
Songywaa的博客
07-16 4690
简单描述需求 第一级：服务器图标有红、绿色俩种状态，只要后边有发现可疑操作就显示红色的(有一个小红灯不那么明显)； 第二级：有多个用户，红色图标的用户则表示，发现可以操作，绿色图标的用户没有发现可疑操作； 第三级：表示每个用户有多次登录，登录以后做了异常操作就显示红色； 第四级：表示具体的异常操作，并且点击跳转到详情页面； ...
ECharts树节点过多时，不想要缩放，调整容器高度（宽度）
hsany330的专栏
08-05 5430
最近需要使用ECharts来实现一棵树，大约四层，但是可能将所有的节点都展开之后，节点数会很多，但是又不想进行缩放。 所用ECharts版本为4.* 如下图 但是又不想进行缩放让节点显变小的方式来获取节点与节点之间的间距， 故想要在点击节点进行子节点的显示与隐藏时调整这个树的动态高度。 在官网API处没有查到相应的解决方法。 没有文档怎么办？设个断点调试的时候看属性。 就在调试过程中发现了这样一个属性：myChart._chartsViews[0]._data._graphicEls
echarts树图层级
最新发布
02-26
### ECharts 树图层级设置与调整方法 #### 调整树图布局方式 对于ECharts中的树图，可以通过修改`layout`属性来改变树图的布局形式。当希望创建多层结构时，可采用默认布局模式，默认情况下会按照层次关系自动排列...
ECharts董事会体系层级特效
06-24
1. **树图（Tree）**：ECharts提供了树图组件，可以用来构建组织架构图。树图可以自上而下或自下而上展示层次结构，节点间通过线条连接，清晰地表现出层次关系。 2. **组织架构数据模型**：为了在ECharts中展示组织...
ECharts董事会体系层级特效.zip
10-10
1. **图表类型**：ECharts支持多种图表，如树图（Tree）或力导向图（Force），可以用来表示组织结构或层级关系。在这个特效中，可能是使用了其中的一种或结合了多种图表类型。 2. **数据组织**：为了呈现层级关系，...
echarts树图自定义图片后，判断当前节点是否有折叠子节点
笑到世界都狼狈的博客
05-15 2147
echarts树图自定义图片后，判断当前节点是否有折叠子节点、树图搜索、查询、自定义节点、高亮、鼠标悬停显示详情
echarts树形思维导图
10-09
echarts树形实例，使用echarts2.x版本（高版本将树形实例已移除），内容包括html，和echarts.js文件
echarts树图的节点自定义图片，以及子节点挤在一起该怎么处理...
木得是的博客
08-19 3538
在长达三天尝试，根据图的要求，他居然选择了echarts的树图，这是为什么呢？让我们一起来看看...
Vue下使用Echart绘制树形关系图谱
fangshuiguang的博客
06-25 8683
某日接到需求说做个这样的关系图 前期因为用到echart，所以没有考虑别的d3.js来实现，主要是节点的更新，echart2有refresh来实现，但是在echart4已不存在该方法，于是用setOption来重新渲染Tree数据，同层级之间的距离一直不好设置，如果数据节点过大的时候会出现重叠的烦恼。 解决问题1，使用自定义节点图片； 解决问题2，当节点数量过多时，初始化节点全在当...
echarts-----树状图(基础参数)
m0_46698214的博客
12-15 2万+
echarts-----树状图 首先echarts官网树状图示例展示展示 代码在官网示例图上都有，可以自行查阅，但该示例有个问题在于树状图的生成线都是弧线，而我们大部分需求都是折线 展示折线树状图，效果如下： 看了官网API参数控制，加上自己试验发现控制折线的参数是edgeShape 贴一下代码块： var data = { "name": "flare", "children": [ { "name": "data",
极致呈现系列之：Echarts树图的信息张力
九仞山的专栏
06-22 901
详细介绍了Echarts中的树图的特性及应用场景，并结合实例进行展示
echarts 树形图 高度宽度自适应
yezitoo的博客
04-29 6073
//tree自适应 const tree = echarts.init(document.getElementById('tree')); const nodes = tree._chartsViews[0]._data._graphicEls; let allNode = 0; for (let index = 0; index < nodes.length; index++) {...
echarts 图设置高度_echarts树形图，分支过多，页面放不下，高度自适应方法
weixin_39835925的博客
01-26 1304
直接代码吧！htmlexport default{data(){return{chartData:{'name':'dlare','children':[]},chartTree:null}},methods:{initChartTree(){this.chartTree = this.$echarts.init(document.getElementById('chart-tree'))let ...
Echarts可视化开发之树型图(公司人事架构图)
热门推荐
xqhadoop的博客
05-19 4万+
引言:Echarts是百度开发的一款可视化的开源js框架,诸如此类的框架很多,今天我们就重点研究Echarts。使用Echarts非常简单,我们将需要展示的数据源以及可视化效果以参数的形式传入Echarts中即可。 一.Echarts使用 我们以官网的一个关于制作简单的树形图为例子,说明Echarts开发的整套流程。 1.开发流程 1).编写visual.hmtl文件,并引入echarts
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值