从数据库获取动态数据实现Echarts（多条折线图）

版权声明：原创不易，转载请注明出处~ https://blog.csdn.net/qq_34266804/article/details/86548621

哈哈，来看看我之前写的，https://blog.csdn.net/qq_34266804/article/details/86503471

虽说可以获取数据库的所有数据，但是我不知道怎么把那些的数据根据ID分为不同的List去分类显示，所以只能显示两条折线，第一条折线的数据是正确的，但是第二条折线确实除却第一条数据的所有数据，哈哈哈，真扯，昨天查了一天的资料，全部都是关于“java后台封装option”以及“利用ajax进行异步更新”的，看不明白，头皮发麻。。。临近下班，实在是没有头绪，去请教部长，询问有什么方法啊，说了好多，最后，部长说还是他做吧，emmmmm。。。。很快就做出来了，emmmm，我来总结总结，重新附上代码和数据显示：

折线图显示：

jsp折线图部分代码：javascript中，第一行的getElementById后的lines要和上方Div的ID要一致。

<div>
				<div id='lines' style="width: 50%; height: 300px;  float:left "></div>
				<div id='columnar' style="width: 50%; height: 300px;  float:right "></div>
			</div>

	//折线图start
				var lines = echarts.init(document.getElementById('lines'));
				//lines.showLoading();   //加载动画
				linesSum = {
				    title : {
				        text: '历史告警'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:[${legend}]
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : false,
				            data : [${xAxis}]
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				       ${series}
				    ]
				};
				      
				lines.setOption(linesSum);
				//折线图end

Action部分代码：

List proTerminalSum = terminalService.queryAlarmSum(task);
		String xAxis="";
		String legend="";
		String series="";
		if (proTerminalSum.size() > 0) {
			Map<String,String> timetemp=new HashMap<String,String>();
			Map<String,String> orgtemp=new HashMap<String,String>();
			Map<String,String> valuetemp=new HashMap<String,String>();
			
			for(int i=0;i<proTerminalSum.size();i++){
				Object[] taskList = (Object[]) proTerminalSum.get(i);
				orgtemp.put(taskList[0].toString(), taskList[1].toString());
				timetemp.put(taskList[2].toString(), taskList[2].toString());
				valuetemp.put(taskList[0].toString()+taskList[2].toString(), taskList[3].toString());
			}
			String[] timestr=new String[timetemp.keySet().size()];
			int cn=0;
			for (String key : timetemp.keySet()) { 
				timestr[cn]=key;
				cn+=1;
			}
			Arrays.sort(timestr);
			for(int i=0;i<timestr.length;i++){
				xAxis+="'"+timestr[i]+"',";
			}
			for(String key : orgtemp.keySet()){
				legend+="'"+orgtemp.get(key)+"',";
				series+="{name:'"+orgtemp.get(key)+"',type:'line',smooth:true,itemStyle: {normal: {areaStyle: {type: 'default'}}},data:[";
				for(int i=0;i<timestr.length;i++){
					if(valuetemp.get(key+timestr[i])!=null){
						series+=valuetemp.get(key+timestr[i])+",";
					}else{
						series+="0,";
					}
				}
				series.substring(0, series.length()-1);
				series+="]},";
			}
			if(xAxis.length()>0)
				xAxis.substring(0, xAxis.length()-1);
			if(legend.length()>0)
				legend.substring(0, legend.length()-1);
			if(series.length()>0)
				series.substring(0, series.length()-1);
		}
	// 折线图（数据传送）
		request.setAttribute("xAxis", xAxis);
		request.setAttribute("legend", legend);
		request.setAttribute("series", series);

        return "layout/nav";

	}

 

Action----->Service-------->Dao层之间的跳转没有改变，参考上方链接的跳转代码，SQL语句实现也没有改变。