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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
js实现一键复制功能
Mar 16 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 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(视频)Http下载
2006/12/12 PHP
php去除重复字的实现代码
2011/09/16 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
javascript 数组的方法集合
2008/06/05 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
ES10的13个新特性示例(小结)
2019/09/23 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python学生管理系统的实现
2020/04/05 Python
Python字符串三种格式化输出
2020/09/17 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
车贷收入证明范本
2014/01/09 职场文书
文明城市标语
2014/06/16 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
创业计划书之水果店
2019/07/18 职场文书
导游词之凤凰古城
2019/10/22 职场文书