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


Posted in Javascript onMay 24, 2019

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

页面效果:

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);

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

Javascript 相关文章推荐
javascript生成随机颜色示例代码
May 05 Javascript
jquery获取tagName再进行判断
May 29 Javascript
浅谈js中的闭包
Mar 16 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
vue中render函数的使用详解
Oct 12 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 #Javascript
微信小程序wepy框架学习和使用心得详解
May 24 #Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 #Javascript
微信小程序动态添加view组件的实例代码
May 23 #Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 #Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 #Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 #Javascript
You might like
学习php分页代码实例
2013/10/24 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python简单实现控制电脑的方法
2018/01/22 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
大学生入党思想汇报
2014/01/14 职场文书
工程质量承诺书
2014/03/27 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
初三英语教学计划
2015/01/23 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python