Echarts动态加载多条折线图

最新推荐文章于 2025-07-11 10:20:42 发布

原创

最新推荐文章于 2025-07-11 10:20:42 发布 · 1.3w 阅读

37 ·

CC 4.0 BY-SA版权

本文介绍了如何在Echarts中动态加载不确定数量的折线图。通过后台封装Series和Echarts，结合Action处理，将数据传入页面进行初始化展示。参考了相关Echarts动态加载和折线图的实例。

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

背景：动态加载多条折线图，折线图条数不确定
页面效果：
实现的页面效果
Echarts数据格式
页面代码

//气象数据
	function serchQx(beginTime, endTime, str, parameter) {
		$("#rr").html("");//将循环拼接的字符串插入下拉列表 
		var t = $("#imageParameter").val();
		$
				.ajax({
					type : "POST",
					data : {
						"str" : str,
						"beginTime" : beginTime,
						"endTime" : endTime,
						"parameter" : parameter,
						"t" : t
					},
					url : "${pageContext.servletContext.contextPath}/dataAnalysis/serch.action",
					success : function(result) {
						var aa = [];
						var tmp=[];
						if (parameter == 1) {
							aa.push('单位（℃）');
							//option.yAxis[0].name = aa;
						} else if (parameter == 2) {
							aa.push('单位（%）');
							//option.yAxis[0].name = aa;
						} else if (parameter == 3) {
							aa.push('单位（KPa）');
							//option.yAxis[0].name = aa;
						} else if (parameter == 4) {
							aa.push('单位（w/㎡）');
							//option.yAxis[0].name = aa;
						} else if (parameter == 5) {
							aa.push('单位（mm）');
							//option.yAxis[0].name = aa;
						} else if (parameter == 6) {
							aa.push('单位（m/s）');
							//option.yAxis[0].name = aa;
						}
						//处理数据
						//将从后台接收的json字符串转换成json对象
						var jsonobj = eval("(" + result + ")");
						//给图标标题赋值
						//opti

最低0.47元/天解锁文章

200万优质内容无限畅学