欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Echarts动态加载多条折线图的实现代码

程序员文章站 2023-12-20 09:12:58
背景:动态加载多条折线图,折线图条数不确定 页面效果: 页面代码 //气象数据 function serchqx(begintim...

背景:动态加载多条折线图,折线图条数不确定

页面效果:

Echarts动态加载多条折线图的实现代码

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 + ")");
						//给图标标题赋值
						//option.legend.data = jsonobj.legend;
						//读取横坐标值
						//option.xaxis[0].data = jsonobj.axis;
						var series_arr = jsonobj.series;
						//驱动图表生成的数据内容,数组中每一项代表一个系列的特殊选项及数据
						for (var i = 0; i < series_arr.length; i++) {
							var datas=[];
							for(var j=0;j<series_arr[i].data.length;j++){
								var n=series_arr[i].data[j];
								var time=series_arr[i].time[j];
								var data=[time,n];
								datas.push(data);
							}
							//转换series
							 temp = {
					          name: series_arr[i].name,
					          type: "line",
					          data: datas
					        };
							 tmp.push(temp)
							 //option.series.push(temp);
						}
						mychart.clear();
						//mychart.setoption(option,true);
						mychart.setoption({ //加载数据图表
							color : colors,
							tooltip : {
								trigger : 'axis'
							},
							datazoom : {
								show : true,
								start : 0,
								realtime : true
							},
							legend : {
								data : jsonobj.legend
							},
							grid : {
								top : 70,
								bottom : 50
							},
							 calculable: true,
							xaxis : [ {
								type : 'time',
								boundarygap : [ 0, 100 ],
								axislabel : {
									textstyle : {
										fontsize : "10px"
									}
								}

							}

							],
							yaxis : [ {
								name : aa,
								type : 'value',
							} ],
							series : tmp},true);
					}
				})
	}

后台封装的series

/**
 * 
 */
package com.myhope.domain;

import java.util.list;

/**
 * description:<br/>
 * copyright (c) , 2017, jansonxu <br/>
 * this program is protected by copyright laws. <br/>
 * program name:series<br/>
 * date:2019年1月14日
 * 
 * @author 
 * @version : 1.0
 */
public class series {
	private string name;
	private string type;
	private list<double> data;
	private list<string> time;
	
	public series(string name, string type, list<double> data, list<string> time) {
		super();
		this.name = name;
		this.type = type;
		this.data = data;
		this.time = time;
	}
	
	public list<string> gettime() {
		return time;
	}

	public void settime(list<string> time) {
		this.time = time;
	}

	public string getname() {
		return name;
	}
	public void setname(string name) {
		this.name = name;
	}
	public string gettype() {
		return type;
	}
	public void settype(string type) {
		this.type = type;
	}
	public list<double> getdata() {
		return data;
	}
	public void setdata(list<double> data) {
		this.data = data;
	}
	public series() {
		super();
	}
	@override
	public string tostring() {
		return "series [name=" + name + ", type=" + type + ", data=" + data + ", time=" + time + "]";
	}

}

后台封装echarts

/**
 * 
 */
package com.myhope.domain;

import java.util.list;

/**
 * description:<br/>
 * copyright (c) , 2017, jansonxu <br/>
 * this program is protected by copyright laws. <br/>
 * program name:echarts<br/>
 * date:2019年1月14日
 * 
 * @author 
 * @version : 1.0
 */
public class echarts {
	private list<string> legend;//name
	private list<string> axis ;//横坐标
	private list<series> series;//数据项
	private list<dataanalysistable> dataanalysistables;
	
	
	

	public echarts(list<string> legend, list<string> axis, list<series> series,
			list<dataanalysistable> dataanalysistables) {
		super();
		this.legend = legend;
		this.axis = axis;
		this.series = series;
		this.dataanalysistables = dataanalysistables;
	}

	public echarts() {
		super();
	}

	public list<string> getlegend() {
		return legend;
	}
	public void setlegend(list<string> legend) {
		this.legend = legend;
	}
	public list<string> getaxis() {
		return axis;
	}
	public void setaxis(list<string> axis) {
		this.axis = axis;
	}
	public list<series> getseries() {
		return series;
	}
	public void setseries(list<series> series) {
		this.series = series;
	}

	public list<dataanalysistable> getdataanalysistables() {
		return dataanalysistables;
	}

	public void setdataanalysistables(list<dataanalysistable> dataanalysistables) {
		this.dataanalysistables = dataanalysistables;
	}

	@override
	public string tostring() {
		return "echarts [legend=" + legend + ", axis=" + axis + ", series=" + series + ", dataanalysistables="
				+ dataanalysistables + "]";
	}
	
}

action封装

将对应的东西传入页面即可

echarts echarts = new echarts(legend, newaxis, series,);
string jsonstring = com.alibaba.fastjson.jsonobject.tojsonstring(echarts);

初始化echarts文件

var dom = document.getelementbyid("xsl");
var mychart = echarts.init(dom);
mychart.showloading({
	text : "图表数据正在努力加载..."
});
var app = {};
app.title = '多 x 轴示例';

var colors = [ '#5793f3', '#d14a61', '#675bba', "#00ff00", "#ffff00" ];

option = {
	color : colors,
	tooltip : {
		trigger : 'axis'
	},
	datazoom : {
		show : true,
		start : 0,
		realtime : true
	},
	legend : {
		data : []
	},
	grid : {
		top : 70,
		bottom : 50
	},
	 calculable: true,
	xaxis : [ {
		type : 'time',
		boundarygap : [ 0, 100 ],
		axislabel : {
			textstyle : {
				fontsize : "10px"
			}
		}

	}

	],
	yaxis : [ {
		name : [],
		type : 'value',
	} ],
	series : []
};
mychart.clear();
mychart.setoption(option, true);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: