echarts（JavaScript）加载json的辛酸史

最新推荐文章于 2025-07-29 14:20:54 发布

千语_肉丸子

最新推荐文章于 2025-07-29 14:20:54 发布

阅读量8.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：数据可视化文章标签： echarts JS ajax

本文链接：https://blog.youkuaiyun.com/u012535605/article/details/80258037

非前端开发者在使用ECharts进行数据可视化时，发现手动插入大量数据效率低下。本文记录了学习使用JavaScript通过AJAX加载JSON文件的过程。遇到的问题包括：JSON解析、浏览器无法直接显示数据、AJAX请求的HTTP服务器配置等。通过Tomcat服务器和正确配置，最终成功实现动态加载JSON数据，数据格式包含'categories'和'data'两个字段。

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

作为非前端开发出身的数据从业人员，echarts数据可视化功能太强大了，通过直接把数据写入到代码里可以实现，但是当数据量太大或者反复操作时，写到代码里太耗时了，因此需要学习js加载文件的方法，去自动化图形，一下记录自己再学习中所遇到的坑。

先上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE;">
		<title>echarts-JSON请求数据</title>
		
		<script src="echarts.js"></script>
		<script src="asset/js/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				var chart = document.getElementById('chart');
				var chartData = echarts.init(chart);
	
			    chartData.setOption({
			        title: {
			            text: '异步数据加载示例'
			        },
			        tooltip: {},
			        legend: {
			            data:['销量']
			        },
			        xAxis: {
			            data: []
			        },