纯前端js实现读取excel表并将数据可视化为关系图

最新推荐文章于 2024-03-19 09:53:30 发布

VIP文章一粒马豆

最新推荐文章于 2024-03-19 09:53:30 发布

阅读量1.1k

点赞数

分类专栏： html5 JavaScript echarts 文章标签： js graph database echarts 关系图

本文链接：https://blog.csdn.net/maillibin/article/details/115282250

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	
	<title>EXCEL TO ECHARTS GRAPH</title>
	
	<style>
		html,body,#graph_container{
			width:100%;
			height:100%;
			margin:0;
			padding:0;
		}
	
		#graph_container{
			background-color:black;
		}
		
		#file_box{
			position:fixed;
			left:1em;
			top:1em;
			background-color:red;
			width:2em;
			height:2em;
			box-shadow:0 0 1em rgba(0,0,0,0.5);
			transition:0.5s;
		}
		#file_box:hover{
			box-shadow:0 0 1em rgba(255,255,255,0.5);
			transform:scale(1.25) rotate(360deg);
			transition:0.5s;
			background-color:yellow;
			border-radius:0.5em;
		}
		
		#file_input{
			position:absolute;
			width:100%;
			height:100%;
			opacity:0;
		}
		
		#console_div{
			position:fixed;
			top:5em;
			left:1em;
			background-color:rgba(255,255,255,0.9);
			padding:1em;
			box-shadow:0 0 2em rgba(255,255,255,1);
			max-width:20em;
			display:none;
			border-radius:1em;
			
		}
		
		.number_input{
			width:5em;
		}
		
		#switch{
			width:1em;
			height:1em;
			background-color:green;
		}
		#controls{
			display:block;
		}
		
	</style>
	
	
	<script src="xlsx.core.min.js"></script>
	<script src="echarts.min.js"></script>
	

</head>
<body>

	<div id="graph_container"></div>
	
	&

最低0.47元/天解锁文章

一粒马豆

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
纯前端js实现读取excel表并将数据可视化为关系图

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Excel三元变图</title> <style> html,body,#graph_container{ width:100%; height:100%; margin:0; padding:0; } #graph_container{ ...
复制链接

扫一扫