亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 開發 > JS > 正文

Echarts動態加載多條折線圖的實現代碼

2024-05-06 16:51:22
字體:
來源:轉載
供稿:網友

背景:動態加載多條折線圖,折線圖條數不確定

頁面效果:

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。


注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
国产日韩精品在线播放| 日韩有码在线观看| 午夜精品美女自拍福到在线| 国产精品中文字幕在线| 日本久久精品视频| 一区二区三区视频免费在线观看| 亚洲国产精品va在线看黑人动漫| 欧美高清在线观看| 久久精品视频播放| 久久久成人的性感天堂| 国产中文字幕亚洲| 久久久精品视频成人| 欧美国产视频一区二区| 91久久国产婷婷一区二区| 国产精品成人国产乱一区| 视频一区视频二区国产精品| 国产精品一区二区久久久| 日韩视频免费中文字幕| 欧美成人午夜剧场免费观看| 久久成人在线视频| 亚洲性生活视频在线观看| 欧美在线视频一区二区| 日韩av中文字幕在线| 国产亚洲精品综合一区91| 亚洲综合成人婷婷小说| 日韩成人av一区| 亚洲成人激情在线| 久久99青青精品免费观看| 亚洲欧洲日产国码av系列天堂| 九九精品在线视频| 亚洲性日韩精品一区二区| 日韩精品中文字幕在线| 69av成年福利视频| 深夜成人在线观看| 国产一区二区三区在线播放免费观看| 美女视频久久黄| 亚洲欧洲在线播放| 国内伊人久久久久久网站视频| 91久久在线播放| 中文字幕日韩欧美在线视频| 欧美日韩成人在线视频| 亚洲免费av电影| 91精品免费久久久久久久久| 日韩有码在线播放| 欧美一级片免费在线| 国产丝袜一区二区三区| 欧美乱大交xxxxx| 欧美成年人网站| 日韩专区在线观看| 久久久精品久久久| 欧美日韩午夜剧场| 国产69精品99久久久久久宅男| 久久久久久久久久久91| 欧美成人手机在线| 亚洲欧美制服另类日韩| 亚洲欧美激情一区| 国产高清视频一区三区| 亚洲男人天堂视频| 欧美另类精品xxxx孕妇| 亚洲国产精品福利| 在线播放日韩精品| www欧美xxxx| 91精品视频专区| 国产精品第三页| 欧美日本在线视频中文字字幕| 在线亚洲男人天堂| 一二美女精品欧洲| 国产女人18毛片水18精品| 成人性生交大片免费观看嘿嘿视频| 欧美激情一区二区三区久久久| 亚洲成人av资源网| 中文字幕日韩欧美精品在线观看| 国产精品白嫩美女在线观看| 国产丝袜精品第一页| 这里只有精品在线播放| 欧美野外猛男的大粗鳮| 欧美成人激情在线| 亚洲爱爱爱爱爱| 欧美一级电影免费在线观看| 97超碰蝌蚪网人人做人人爽| 亚洲国产小视频在线观看| 久久全国免费视频| 高清欧美一区二区三区| 欧美壮男野外gaytube| 久久久久久久av| 精品国产户外野外| 亚洲欧洲成视频免费观看| 亚洲人永久免费| 日韩精品中文字幕视频在线| 久久久久中文字幕| 欧美专区日韩视频| 日韩精品在线观看一区| 亚洲精品一区二三区不卡| 亚洲天堂av女优| 国产欧美一区二区三区在线| 成人伊人精品色xxxx视频| 中文字幕日本精品| 久久精品中文字幕电影| 久久99国产精品自在自在app| 一区二区三欧美| 亚州欧美日韩中文视频| 欧美精品在线观看91| 亚洲欧美中文另类| 国产一区二区三区免费视频| 日韩国产精品亚洲а∨天堂免| 欧美电影免费观看高清| 夜夜躁日日躁狠狠久久88av| 欧美理论电影在线播放| 97在线观看免费高清| 色偷偷av亚洲男人的天堂| 久久久久久久91| 日韩大陆毛片av| 色爱av美腿丝袜综合粉嫩av| 亚洲风情亚aⅴ在线发布| 久久久精品国产亚洲| 国产一区二区黑人欧美xxxx| 成人午夜激情免费视频| 国产精品草莓在线免费观看| 亚洲精品电影在线| 日韩欧美在线免费| 欧美在线免费看| 国产精品h在线观看| 中文字幕亚洲字幕| 少妇高潮久久77777| 国产精品啪视频| 高清一区二区三区四区五区| 亚洲日韩欧美视频| 国产精品三级久久久久久电影| 国产精品热视频| 91国产精品91| 久久999免费视频| 国产精品久久99久久| 91综合免费在线| 亚洲欧美在线磁力| 久久99精品久久久久久青青91| 亚洲成人激情视频| 中文字幕欧美视频在线| 91av免费观看91av精品在线| 深夜福利国产精品| 久久成人在线视频| 中文字幕日韩欧美| 国产精品第100页| 浅井舞香一区二区| 欧美成人激情在线| 欧美国产日韩免费| 亚洲欧洲xxxx| 国产999精品久久久影片官网| 欧美成人在线网站| 自拍偷拍亚洲区| 国产一区欧美二区三区| 国产91精品久久久| 欧美在线视频免费播放| 国产最新精品视频| 久久亚洲综合国产精品99麻豆精品福利| 欧美激情视频免费观看| 亚洲欧洲午夜一线一品| 久久免费视频这里只有精品| 亚洲第一视频网站| 亚洲天堂网在线观看| 欧美性xxxx极品hd欧美风情| 国产一区红桃视频| 激情亚洲一区二区三区四区| 亚洲精品在线观看www| 青青青国产精品一区二区|