JSON数据渲染为表格与雷达图

最新推荐文章于 2025-09-03 10:48:42 发布

We....

最新推荐文章于 2025-09-03 10:48:42 发布

阅读量342

点赞数 7

CC 4.0 BY-SA版权

文章标签： json

本文链接：https://blog.csdn.net/m0_74230209/article/details/151090279

本篇博客将介绍如何将AJAX获取后端返回的JSON数据渲染到前端页面，包括表格展示和雷达图可视化两种形式。

通过后端获取的数据如下：

1. 表格渲染实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table {
				width: 100%;
				height: 20vh;
				background-color: bisque;
			}

			td {
				text-align: center;
				font-weight: bold;
			}

			tr:hover {
				background-color: azure;
			}
		</style>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		function queryTabData() {

			//1.创建原生ajax请求对象
			let ajaxObj = new XMLHttpRequest();

			//2.设置请求方法和链接
			ajaxObj.open("get", "http://127.0.0.1:8790/querytabdatas");

			//3.发送请求
			ajaxObj.send();

			//4.回调,得到服务器传送的数据
			ajaxObj.onreadystatechange = () => {

				if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
					let result = ajaxObj.responseText;
					console.log('服务器端传回的数据为:' + result);
					console.log(typeof result);

					//eval函数把这个文本转换成js对象：json的字符串对象
					let re1 = eval(result)

					if (re1 != undefined) {
						let objdatas = JSON.parse(JSON.stringify(re1));
						console.log(objdatas);
						console.log(typeof objdatas);
						createTabel(objdatas);
					}

				}
			}
		}

		function createTabel(objdatas) {

			//获取body对象
			let bodyObj = document.body

			//创建表格对象标签	 
			let tabObj = document.createElement("table");
			
			//设置表格边框
			tabObj.border = 1;
			
			let trObj1 = document.createElement("tr");

			//加载key  es6语法
			Object.keys(objdatas[0]).forEach(function(key) {

				console.log("->" + key);
				if (key == 'eid') {
					key = "员工编号"
				}
				if (key == 'ename') {
					key = "员工姓名"
				}
				if (key == 'eaddress') {
					key = "员工地址"
				}
				if (key == 'esalary') {
					key = "员工工资"
				}
				if (key == 'epwd') {
					key = "员工密码"
				}
				if (key == 'estate') {
					key = "员工状态"
				}
				if (key == 'ebirthday') {
					key = "员工出生年月"
				}

				let thObj0 = document.createElement("th");
				thObj0.innerText = key;
				trObj1.appendChild(thObj0);

			});
			
			//添加到表格中
			tabObj.appendChild(trObj1);

			//加载数据
			for (let i = 0; i < objdatas.length; i++) {
				//创建行
				let trObj = document.createElement("tr");

				//创建td
				let tdObj0 = document.createElement("td");
				let tdObj1 = document.createElement("td");
				let tdObj2 = document.createElement("td");
				let tdObj3 = document.createElement("td");
				let tdObj4 = document.createElement("td");
				let tdObj5 = document.createElement("td");
				let tdObj6 = document.createElement("td");

				tdObj0.innerText = objdatas[i].eid;
				tdObj1.innerText = objdatas[i].eaddress;
				tdObj2.innerText = objdatas[i].ename;
				tdObj3.innerText = objdatas[i].esalary;
				tdObj4.innerText = objdatas[i].epwd;
				tdObj5.innerText = objdatas[i].estate;
				tdObj6.innerText = objdatas[i].ebirthday;

				trObj.appendChild(tdObj0);
				trObj.appendChild(tdObj1);
				trObj.appendChild(tdObj2);
				trObj.appendChild(tdObj3);
				trObj.appendChild(tdObj4);
				trObj.appendChild(tdObj5);
				trObj.appendChild(tdObj6);

				//添加到表格中
				tabObj.appendChild(trObj);
			}

			//表格添加到body标签中
			bodyObj.appendChild(tabObj);
		}
		queryTabData();
	</script>
</html>

实现效果：

2. 雷达图可视化实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#main {
				width: 90vh;
				height: 60vh;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
	</head>
	<body>
		<div id="main"></div>
	</body>
	<script type="text/javascript">
		function loadView() {
			//1.创建原生ajax请求对象
			let ajaxObj = new XMLHttpRequest();

			//2.设置请求方法和链接
			ajaxObj.open("get", "http://127.0.0.1:8790/querytabdatas");

			//3.发送请求
			ajaxObj.send();

			//4.回调,得到服务器传送的数据
			ajaxObj.onreadystatechange = () => {

				if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
					let result = ajaxObj.responseText;
					console.log('服务器端传回的数据为:' + result);
					console.log(typeof result);

					//eval函数把这个文本转换成js对象：json的字符串对象
					let re1 = eval(result)

					if (re1 != undefined) {
						let objdatas = JSON.parse(JSON.stringify(re1));
						console.log(objdatas);
						console.log(typeof objdatas);
						loadPieView(objdatas)
					}
				}

			}

		}

		function loadPieView(objdatas) {
			let echartObj = echarts.init(document.getElementById("main"));

			let option = {
				legend: {
					data: ['茉莉1', '茉莉2']
				},
				radar: {
					// shape: 'circle',
					indicator: [{
							name: 'Sales',
							max: 6500
						},
						{
							name: 'Administration',
							max: 16000
						},
						{
							name: 'Information Technology',
							max: 30000
						},
						{
							name: 'Customer Support',
							max: 38000
						},
						{
							name: 'Development',
							max: 52000
						},
						{
							name: 'Marketing',
							max: 25000
						}
					]
				},
				series: [{
					name: 'Budget vs spending',
					type: 'radar',
					data: [{
							value: [4200, 3000, 20000, 35000, 50000, 18000],
							name: '茉莉1'
						},
						{
							value: [5000, 14000, 28000, 26000, 42000, 21000],
							name: '茉莉2'
						}
					]
				}]
			};
			echartObj.setOption(option);
		}
		loadView();
	</script>
</html>

实现效果：