使用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
/**
 * 
 */
package com.myhope.domain;

import java.util.List;

/**
 * Description：

 * Copyright (c) ， 2017， Jansonxu 

 * This program is protected by copyright laws. 

 * Program Name：Series

 * Date：2019年1月14日
 * 
 * @author 
 * @version : 1.0
 */
public class Series {
	private String name;
	private String type;
	private List data;
	private List time;
	
	public Series(String name, String type, List data, List time) {
		super();
		this.name = name;
		this.type = type;
		this.data = data;
		this.time = time;
	}
	
	public List getTime() {
		return time;
	}

	public void setTime(List 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 getData() {
		return data;
	}
	public void setData(List 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：

 * Copyright (c) ， 2017， Jansonxu 

 * This program is protected by copyright laws. 

 * Program Name：Echarts

 * Date：2019年1月14日
 * 
 * @author 
 * @version : 1.0
 */
public class Echarts {
	private List legend;//name
	private List axis ;//横坐标
	private List series;//数据项
	private List dataAnalysisTables;
	
	
	

	public Echarts(List legend, List axis, List series,
			List dataAnalysisTables) {
		super();
		this.legend = legend;
		this.axis = axis;
		this.series = series;
		this.dataAnalysisTables = dataAnalysisTables;
	}

	public Echarts() {
		super();
	}

	public List getLegend() {
		return legend;
	}
	public void setLegend(List legend) {
		this.legend = legend;
	}
	public List getAxis() {
		return axis;
	}
	public void setAxis(List axis) {
		this.axis = axis;
	}
	public List getSeries() {
		return series;
	}
	public void setSeries(List series) {
		this.series = series;
	}

	public List getDataAnalysisTables() {
		return dataAnalysisTables;
	}

	public void setDataAnalysisTables(List 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);
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。
            
            
                        

            网站标题：使用Echarts怎么动态加载多条折线图            

            本文URL：http://cdkjz.cn/article/gdosde.html