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

最新推荐文章于 2024-04-19 13:28:21 发布
最新推荐文章于 2024-04-19 13:28:21 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： 插件 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hs1219462412/article/details/127785116
版权
此代码示例展示了如何使用Echarts库创建一个树形图，并根据树的高度动态调整图表的宽度和高度。在React组件中，通过`useEffect`和`resize`函数监听并响应树数据的变化，以实现图表的自适应布局。数据结构为flare分析的示例，包含了多个层级和节点。点击节点时，图表会重新调整大小以适应新的展开状态。
摘要由CSDN通过智能技术生成 
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 2942
<>看到网上关于echarts tree的资料有点少，做项目恰巧遇到这个，把一些获得分享给大家。从echarts、官方API中我们似乎只能定义根节点的位置，并不能指定树图整体的大小以及其整体在dom显示的位置，在tree生成过程中只是以根节点向下方左右两边扩展。从echarts官网提供的API我们可以知道var chart = echarts.init(dom); chart.getZ...
echart树图设置层级距离_Echarts tree 宽度随着数据层级增加而改变
weixin_35996612的博客
02-23 1992
业务显示的是数据库的字段对应关系，都是1对1的关系。因此不考虑增加高度，高度改变的网上有很多教程。此例子是宽度随着层级的改变而改变。HTML结构：JS逻辑：myChart.setOption(option = {tooltip: {trigger: 'item',triggerOn: 'mousemove'},series: [{type: 'tree',data: [data],//data取自...
echarts树图
start_XUEBA的博客
11-18 2219
用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自定义树状图，且每个系列柱子数不一
04-11
echarts自定义柱状图的形式，根据数据格式，横轴为多个系列项，每个系列项拥有的柱子数量不等，可自动计算柱子数量等分宽度显示。
echarts--树图实现自定义图标
Songywaa的博客
07-16 4590
简单描述需求 第一级：服务器图标有红、绿色俩种状态，只要后边有发现可疑操作就显示红色的(有一个小红灯不那么明显)； 第二级：有多个用户，红色图标的用户则表示，发现可以操作，绿色图标的用户没有发现可疑操作； 第三级：表示每个用户有多次登录，登录以后做了异常操作就显示红色； 第四级：表示具体的异常操作，并且点击跳转到详情页面； ...
ECharts树节点过多时，不想要缩放，调整容器高度（宽度）
高小葱的博客
04-25 2万+
最近需要使用ECharts来实现一棵树，大约四层，但是可能将所有的节点都展开之后，节点数会很多，但是又不想进行缩放。所用ECharts版本为4.*如下图但是又不想进行缩放让节点显变小的方式来获取节点与节点之间的间距，故想要在点击节点进行子节点的显示与隐藏时调整这个树的动态高度。在官网API处没有查到相应的解决方法。没有文档怎么办？设个断点调试的时候看属性。就在调试过程中发现了这样一个属性：myCh...
Vue下使用Echart绘制树形关系图谱
fangshuiguang的博客
06-25 8519
某日接到需求说做个这样的关系图 前期因为用到echart，所以没有考虑别的d3.js来实现，主要是节点的更新，echart2有refresh来实现，但是在echart4已不存在该方法，于是用setOption来重新渲染Tree数据，同层级之间的距离一直不好设置，如果数据节点过大的时候会出现重叠的烦恼。 解决问题1，使用自定义节点图片； 解决问题2，当节点数量过多时，初始化节点全在当...
echart树图设置层级距离_Echarts - 树图实现四个层级
weixin_36238073的博客
01-14 746
我相信很多人和我一样，制作echats图标时，都会先去demo官网找相同的或者近似的效果，然后再此基础上改进成我们想要的那个。但是近期混迹某微信群时，我看到一个群友抛出问题说，echarts画树状图，自己有四层数据，但是只有三层渲染出来了。我跟他说你去ecahrts官网找个四级的。我记得有的。他说官网的也只有三层，还截图给我看，果然还是被我找到了：数据太多，勉强观看。我甚至还能搞成五层不卖关子。其...
echart树图设置层级距离_小程序echart图层级显示问题
weixin_32238435的博客
01-14 589
前言使用过echart插件开发小程序的同学，应该都会遇到这个问题。尤其常见的是需求是：顶部固定，其他内容可以滚动 ，这时你会发现绘制的图形是会穿透所固定的顶部，并且无论你怎么给顶部区域设置css的z-index都是无效的。来看下案发现场例子：其实微信官方有写到，诸如canvas，video等组件是使用客户端创建的原生组件，而原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多...
echart关系树状图_echarts - 树图实现四个层级
weixin_39952031的博客
12-23 1704
我相信很多人和我一样，制作echats图标时，都会先去demo官网找相同的或者近似的效果，然后再此基础上改进成我们想要的那个。但是近期混迹某微信群时，我看到一个群友抛出问题说，echarts画树状图，自己有四层数据，但是只有三层渲染出来了。我跟他说你去ecahrts官网找个四级的。我记得有的。他说官网的也只有三层，还截图给我看，果然还是被我找到了：数据太多，勉强观看。我甚至还能搞成五层不卖关子。其...
echarts树形思维导图
10-09
echarts树形实例，使用echarts2.x版本（高版本将树形实例已移除），内容包括html，和echarts.js文件
ECharts董事会体系层级特效
06-24
1. **树图（Tree）**：ECharts提供了树图组件，可以用来构建组织架构图。树图可以自上而下或自下而上展示层次结构，节点间通过线条连接，清晰地表现出层次关系。 2. **组织架构数据模型**：为了在ECharts中展示组织...
【Echarts】基于Echarts4.0修改树图连接线(由曲线转为直角线)
dkz97的博客
12-02 7959
树图连接线曲线改为直角线 前言 Echarts (http://echarts.baidu.com/)是百度公司出品的一个开源制作图标的js插件，可以说是百度不可多得的良心产品了。我写这篇文章的时候是19年的11月。echarts已经出到4.x的版本，想要更深入了解echarts以及下载echarts的话，直接百度就可以去官网或者github上下载了。 问题/需求 直接进入主题，至于要写这篇文章，...
极致呈现系列之：Echarts树图的信息张力
九仞山的专栏
06-22 701
详细介绍了Echarts中的树图的特性及应用场景，并结合实例进行展示
echarts树图自定义图片后，判断当前节点是否有折叠子节点
笑到世界都狼狈的博客
05-15 1864
echarts树图自定义图片后，判断当前节点是否有折叠子节点、树图搜索、查询、自定义节点、高亮、鼠标悬停显示详情
echarts实现树图-tree
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
09-18 3111
echarts实现图谱树
echarts 图设置高度_echarts树形图，分支过多，页面放不下，高度自适应方法
weixin_39835925的博客
01-26 1245
直接代码吧！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
Echarts中树状图的使用
最新发布
2201_75474092的博客
04-19 932
【代码】Echarts中树状图的使用。
在vue中echarts的tree树形图容器设置宽800px,高800px,有一个全屏按钮,点击全屏按钮全屏效果如果数据多有滚动条,如果数据少就展示所有数据点击退出echarts显示原来的大小图表,全屏效果自适应
04-04
Vue中可以使用element-ui组件库中的Dialog组件来实现全屏效果，通过监听Dialog的全屏事件来动态改变echarts tree树形图的容器大小。 具体实现步骤如下： 1. 在echarts tree树形图的容器中添加一个全屏按钮，通过点击事件触发显示Dialog组件。 2. 在Dialog组件中显示echarts tree树形图，并设置Dialog的宽度和高度为100%。 3. 监听Dialog的全屏事件，在全屏状态下将echarts tree树形图容器的宽度和高度设置为窗口的宽度和高度，同时设置overflow为auto，以便在数据多时显示滚动条。 4. 在退出全屏状态下，将echarts tree树形图容器的宽度和高度设置为800px，overflow设置为hidden。 5. 当窗口大小改变时，动态改变echarts tree树形图容器的大小。 下面是具体的代码实现： ```html <template> <div> <div class="chart-container" ref="chartContainer"></div> <el-dialog v-model="fullscreen" :fullscreen="true" :before-close="beforeClose" @fullscreen="handleFullscreen" > <div class="chart-container-fullscreen" ref="chartContainerFullscreen"></div> </el-dialog> </div> </template> <script> import * as echarts from 'echarts' export default { data() { return { chartData: [], // echarts tree数据 fullscreen: false, // 是否全屏状态 chartContainerWidth: 800, // echarts tree容器宽度 chartContainerHeight: 800, // echarts tree容器高度 } }, mounted() { this.initChart() }, methods: { // 初始化echarts tree initChart() { const chart = echarts.init(this.$refs.chartContainer) // 设置echarts tree option chart.setOption(option) this.chartData = chart.getDataURL() }, // 全屏事件处理 handleFullscreen(val) { if (val) { // 进入全屏 this.chartContainerWidth = window.innerWidth this.chartContainerHeight = window.innerHeight this.$refs.chartContainerFullscreen.innerHTML = `<img src="${this.chartData}" />` this.$refs.chartContainerFullscreen.style.overflow = 'auto' } else { // 退出全屏 this.chartContainerWidth = 800 this.chartContainerHeight = 800 this.$refs.chartContainerFullscreen.innerHTML = '' this.$refs.chartContainerFullscreen.style.overflow = 'hidden' } }, // Dialog关闭前处理 beforeClose(done) { if (this.fullscreen) { this.fullscreen = false done(false) } else { done() } }, // 窗口大小改变时动态改变echarts tree容器大小 handleResize() { if (!this.fullscreen) { this.chartContainerWidth = 800 this.chartContainerHeight = 800 } else { this.chartContainerWidth = window.innerWidth this.chartContainerHeight = window.innerHeight } }, }, mounted() { window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, } </script> <style> .chart-container { width: 800px; height: 800px; } .chart-container-fullscreen { width: 100%; height: 100%; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值