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 表单验证常见正则
Sep 28 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
我的论坛源代码(一)
2006/10/09 PHP
php页面防重复提交方法总结
2013/11/25 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python自定义函数def的应用详解
2020/06/03 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
python 如何设置守护进程
2020/10/29 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
单位办理社保介绍信
2014/01/10 职场文书
欢迎横幅标语
2014/06/17 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
golang特有程序结构入门教程
2021/06/02 Python
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
java如何实现socket连接方法封装
2021/09/25 Java/Android