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 相关文章推荐
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
vuex学习之Actions的用法详解
Aug 29 Javascript
js生成word中图片处理方法
Jan 06 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python File(文件) 方法整理
2019/02/18 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
几个数据库方面的面试题
2016/07/01 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
物流业务员岗位职责
2014/02/08 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
商业项目策划方案
2014/06/05 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
教师个人师德总结
2015/02/06 职场文书
安装工程师岗位职责
2015/02/13 职场文书
音乐教师求职信范文
2015/03/20 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
2016年学校招生广告语
2016/01/28 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫