echarts如何接入数据

最新推荐文章于 2025-05-30 08:59:48 发布

很有想法的小伙子

最新推荐文章于 2025-05-30 08:59:48 发布

阅读量7.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_40388552/article/details/85067205

echarts 专栏收录该内容

7 篇文章

订阅专栏

本文分享了使用ECharts结合Ajax动态加载数据并实时更新图表的实战经验，详细介绍了如何设置定时器定期获取数据，以及如何使图表自适应窗口大小。

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

版权声明：本文为章鱼哥原创文章，若要转载，请注明出处 https://blog.youkuaiyun.com/qq_40388552/article/details/85067205
话不多说，直接上代码

var myCharts = echarts.init(document.getElementById('DivID'));
var myDate1 = []; 
var myDate2 = []; 
function loadDate() {
	myDate = []; 
	myDate2 = []; 
	$.ajax({
		type: 'get',
		url: '', //请求数据的地址
		dataType: "json", //返回数据形式为json
		async: false //等待服务器返回数据再渲染echarts图表
		success: function(ResultJson) {
			$.each(ResultJson, function(index, item) {
				myDate1.push(item.data1); //
				myDate2 .push(item.data2);
			});
			myCharts.setOption({ 
				yAxis: {
					data: yDate
				},
				series: [{
					data: seriesDate
				}]
			});
		},
	});
};
$(function() {
	loadDate();
	setInterval("loadDate()", 1000 * 20);
});
var option = {
	yAxis: [{ data: [], }],
	xAxis: [{}],
	series: [{ data: [], }, ]
};
myCharts.setOption(option);
//自适应div大小
window.addEventListener("resize", function() {
	myCharts.resize();
});

over,不太明白话，可以留言。