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

背景：动态加载多条折线图，折线图条数不确定页面效果：页面代码//气象数据functionserchQx(

背景：动态加载多条折线图，折线图条数不确定

页面效果：

页面代码

//气象数据
	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);

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

Echarts 多条折线图 Echarts 动态折线图