使用Echarts怎么動(dòng)態(tài)加載多條折線圖?很多新手對此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)商河免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
//氣象數(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ù) //將從后臺(tái)接收的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ū)動(dòng)圖表生成的數(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后臺(tái)封裝的Series
/** * */ package com.myhope.domain; import java.util.List; /** * Description:
* Copyright (c) , 2017, Jansonxu
* This program is protected by copyright laws.
* Program Name:Series
* Date:2019年1月14日 * * @author * @version : 1.0 */ public class Series { private String name; private String type; private Listdata; private List time; public Series(String name, String type, List data, List time) { super(); this.name = name; this.type = type; this.data = data; this.time = time; } public List getTime() { return time; } public void setTime(List 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 getData() { return data; } public void setData(List data) { this.data = data; } public Series() { super(); } @Override public String toString() { return "Series [name=" + name + ", type=" + type + ", data=" + data + ", time=" + time + "]"; } } 后臺(tái)封裝Echarts
/** * */ package com.myhope.domain; import java.util.List; /** * Description:
* Copyright (c) , 2017, Jansonxu
* This program is protected by copyright laws.
* Program Name:Echarts
* Date:2019年1月14日 * * @author * @version : 1.0 */ public class Echarts { private Listlegend;//name private List axis ;//橫坐標(biāo) private List series;//數(shù)據(jù)項(xiàng) private List dataAnalysisTables; public Echarts(List legend, List axis, List series, List dataAnalysisTables) { super(); this.legend = legend; this.axis = axis; this.series = series; this.dataAnalysisTables = dataAnalysisTables; } public Echarts() { super(); } public List getLegend() { return legend; } public void setLegend(List legend) { this.legend = legend; } public List getAxis() { return axis; } public void setAxis(List axis) { this.axis = axis; } public List getSeries() { return series; } public void setSeries(List series) { this.series = series; } public List getDataAnalysisTables() { return dataAnalysisTables; } public void setDataAnalysisTables(List 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)容是否對您有幫助呢?如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。
文章題目:使用Echarts怎么動(dòng)態(tài)加載多條折線圖
文章路徑:http://weahome.cn/article/gdosde.html