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使用cookie
Feb 02 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
JQuery 常用操作代码
Mar 14 Javascript
jquery each()源代码
Feb 14 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
Vuex 快速入门(简单易懂)
Sep 20 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
js实现倒计时秒杀效果
Mar 25 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
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的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
WxPython建立批量录入框窗口
2019/02/27 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
乱丢垃圾袋检讨书
2014/10/08 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书