Echarts 循环实现动态加载series数据项

跳动的世界线

已于 2024-10-25 13:10:16 修改

阅读量1.8k

点赞数 2

分类专栏：开发DEBUG记录文章标签： javascript

于 2021-02-07 12:25:41 首次发布

本文链接：https://blog.youkuaiyun.com/Beatingworldline/article/details/113637305

版权

开发DEBUG记录专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何在Echarts中通过循环实现动态加载series数据项，首先获取所需图表配置数据，然后创建JSON存储数据，根据逻辑将数据填充到JSON的series中，最后在option中设置series并使用setOption方法展示图表。

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

取出需要在图表中配置的各项数据

	var count=0;//用于计算数据的变量
	var PRODUCE_TIME=[];//查询结果集合的出现的生产时间跨度集合
	var DEFECT_CNAME=[];//查询结果集合的出现的缺陷名称
	var list = resultGrid.eiInfo.extAttr[1];
//	var mapPojo = resultGrid.eiInfo.blocks.result.meta.metas;使用非block内的list 结构改变用不到了
	
	for(var i=0;i<list.length;i++){
		var time = list[i].PRODUCE_TIME.substr(0,timecount);//去除重复时间数据
		for(var j=0;j<PRODUCE_TIME.length;j++){
			if(time == PRODUCE_TIME[j]){time=null;break;}
			else{continue;}
		}
		if(time!=null){
			PRODUCE_TIME.push(time);
		}
		else{};
		
		
		var NAME = list[i].DEFECT_CNAME;//去除重复与空缺陷名称数据
		for(var j=0;j<DEFECT_CNAME.length;j++){
			if(NAME == DEFECT_CNAME[j]){NAME=null;break;}
			else{continue;}
		}
		if(NAME!=null){
			DEFECT_CNAME.push(list[i].DEFECT_CNAME);
		}
		else{};
	}

再设置存放数据的JSON

var json={};
	for(var j=0;j<DEFECT_CNAME.length;j++){//把缺陷名按顺序放入JSON中  为对应DEFECT_CNAME以便循环输出
		json[DEFECT_CNAME[j]]=new Array();//放入数组
		for (var i = 0; i < PRODUCE_TIME.length; i++) {
			json[DEFECT_CNAME[j]][i] = new Array();
			for (var x= 0; x < 3; x++) {
				if(x==0){
					json[DEFECT_CNAME[j]][i][x] = PRODUCE_TIME[i];
				}else{
					json[DEFECT_CNAME[j]][i][x] = 0;
				}
			}
		}
	}

将数据按照逻辑放入JSON中：

	for(var i=0;i<list.length;i++){//遍历查询结果list集
		if(list[i].PRODUCE_TIME.substr(0,timecount)==PRODUCE_TIME[j]){//相同时间跨度的不同区域数据处理  缺陷个数和面积
			for(var X=0;X<DEFECT_CNAME.length;X++){
				if(DEFECT_CNAME[X]==list[i].DEFECT_CNAME){//同时间段同名数据
					count = json[DEFECT_CNAME[X]][j][1];
					count+=parseInt(list[i].DEFECT_COUNT);
					json[DEFECT_CNAME[X]][j][1]=count;
					
					
					count = json[DEFECT_CNAME[X]][j][2];
					count=Math.floor((parseFloat(list[i].DEFECT_AREA+count))*100)/100;
					json[DEFECT_CNAME[X]][j][2]=count;
					break;
				}
			}
		}
		else{
			j++;
			for(var X=0;X<DEFECT_CNAME.length;X++){
			if(DEFECT_CNAME[X]==list[i].DEFECT_CNAME){//同时间段同名数据
				count = json[DEFECT_CNAME[X]][j][1];
				count+=parseInt(list[i].DEFECT_COUNT);
				json[DEFECT_CNAME[X]][j][1]=count;
				
				count = json[DEFECT_CNAME[X]][j][2];
				count=Math.floor((parseFloat(list[i].DEFECT_AREA+count))*100)/100;
				json[DEFECT_CNAME[X]][j][2]=count;
				break;
			}
			}
		}
	}

将数据放入series：

var series=[];
	   for(var i = 0;i<DEFECT_CNAME.length;i++){
	       series.push({
	           name: DEFECT_CNAME[i],
	           type: 'line',
	           smooth: true,
	           data:json[DEFECT_CNAME[i]]
	       });
	 }

最后option中设置series,调用setOption展示图表

option = {
	......
	series: series,
	......
	}
	 ```