Echarts動態(tài)加載多條折線圖的實(shí)現(xiàn)代碼
更新時(shí)間：2019年05月24日 09:24:20 作者：哈哈超級
這篇文章主要介紹了Echarts動態(tài)加載多條折線圖的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
背景：動態(tài)加載多條折線圖，折線圖條數(shù)不確定
頁面效果：
頁面代碼
//氣象數(shù)據(jù)
function serchQx(beginTime, endTime, str, parameter) {
$("#rr").html("");//將循環(huán)拼接的字符串插入下拉列表
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;
}
//處理數(shù)據(jù)
//將從后臺接收的json字符串轉(zhuǎn)換成json對象
var jsonobj = eval("(" + result + ")");
//給圖標(biāo)標(biāo)題賦值
//option.legend.data = jsonobj.legend;
//讀取橫坐標(biāo)值
//option.xAxis[0].data = jsonobj.axis;
var series_arr = jsonobj.series;
//驅(qū)動圖表生成的數(shù)據(jù)內(nèi)容，數(shù)組中每一項(xiàng)代表一個(gè)系列的特殊選項(xiàng)及數(shù)據(jù)
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);
}
//轉(zhuǎn)換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({ //加載數(shù)據(jù)圖表
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 ;//橫坐標(biāo)
private List<Series> series;//數(shù)據(jù)項(xiàng)
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封裝
將對應(yīng)的東西傳入頁面即可
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 : "圖表數(shù)據(jù)正在努力加載..."
});
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);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在HTTPS 項(xiàng)目中使用百度地圖 API，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript實(shí)現(xiàn)橫向滑出的多級菜單效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)橫向滑出的多級菜單效果,涉及JavaScript數(shù)學(xué)運(yùn)算及頁面元素樣式動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
如何通過setTimeout理解JS運(yùn)行機(jī)制詳解
這篇文章主要給大家介紹了關(guān)于如何通過setTimeout理解JS運(yùn)行機(jī)制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了JavaScript生成SQL查詢表單的方法,涉及javascript頁面元素及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)圖像模糊化的方法實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖像模糊化的方法,文中先進(jìn)行簡單介紹，而后給出了完整的實(shí)例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
JS實(shí)現(xiàn)json的序列化和反序列化功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)json的序列化和反序列化功能,結(jié)合具體實(shí)例形式分析了javascript針對json的序列化與反序列化相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06
用js模擬JQuery的show與hide動畫函數(shù)代碼
用javascript實(shí)現(xiàn)的模擬jquery下的顯示與隱藏的動畫效果，學(xué)習(xí)的朋友可以參考下。2010-09-09
這篇文章主要介紹了小程序跳轉(zhuǎn)H5頁面的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
arcgis for js 修改infowindow樣式的方法
下面小編就為大家?guī)硪黄猘rcgis for js 修改infowindow樣式的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
用javascript實(shí)現(xiàn)鼠標(biāo)框選
用javascript實(shí)現(xiàn)鼠標(biāo)框選...2007-05-05