Echarts动态加载多条折线图的实现代码

背景：动态加载多条折线图，折线图条数不确定

页面效果：

页面代码

//气象数据函数serchQx(beginTime，endTime，str，parameter) {$('#rr ').html(" ")；//将循环拼接的字符串插入下拉列表var t=$('#imageParameter ').val()；$.ajax({type : 'POST '，data : {'str' : str，' beginTime' : beginTime，' endTime' : endTime，'参数' : '，URL : ' $ { page context。servletcontext。上下文路径}/dataAnalysis/serch。action '，success 3360 function(result){ var aa=[]；var tmp=[]；如果(参数==1) {aa.push('单位()');//option.yAxis[0].名称=aa}否则如果(参数==2) {aa.push('单位(%)');//option.yAxis[0].名称=aa}否则如果(参数==3) {aa.push('单位（千帕)');//option.yAxis[0].名称=aa}否则如果(参数==4) {aa.push('单位(w/)')；//option.yAxis[0].名称=aa}否则如果(参数==5) {aa.push('单位(mm)')；//option.yAxis[0].名称=aa}否则如果(参数==6) {aa.push('单位(m/s)')；//option.yAxis[0].名称=aa}//处理数据//将从后台接收的数据字符串转换成数据对象var jsonobj=eval('(' result ')')；//给图标标题赋值//选项。传奇。data=jsonobj。传说；//读取横坐标值//option.xAxis[0].数据=jsonobj . axis var series _ arr=jsonobj.series//驱动图表生成的数据内容，数组中每一项代表一个系列的特殊选项及数据for(var I=0；I series _ arr . lengthi){ var data=[]；for(var j=0；jseries _ arr[I]。数据。长度；j ){var n=series_arr[i].数据[j]；可变时间=序列_arr[i].时间[j]；定义变量数据=[时间，n]；datas.push(数据);}//转换系列温度={ name: series_arr[i].名称，类型："行",数据：数据};tmp。push(temp)//选项。系列。推送(温度)；}我的图表。clear()；//myChart.setOption(选项，真)；myChart.setOption({ //加载数据图表color : colors，tooltip : { trigger : ' axis ' }，dataZoom : {show : true，start : 0，realtime : true}，legend : { data : jsonobj。图例}，网格： {顶部： 70，底部： 50}，可计算： true，xAxis :[{ type 30}})后台封装的系列

/* * * */package.com我的希望。领域；导入Java。乌提尔。列表；/** *描述：br/*版权所有2017年，Jansonxu br/*本程序受版权法保护br/*计划名称：Seriesbr/*日期：2019年年一月14日* * @作者* @版本： 1.0 */公共类系列{私有线名称；私有字符串类型；私有列表双数据；私有列表字符串时间；公共系列（字符串名称、字符串类型、列表双数据、列表字符串时间){ super()；this . name=name this . type=type this . data=数据；this.time=时间；} public ListString GetTime(){ 0返回时间；} public void setTime(ListString time){ this。时间=时间；} public String getName(){ return name；} public void setName(String name){ this。name=name}公共字符串GetType(){ 0返回类型；}公共void setType(字符串类型){ this.type=type}公共列表double GetDATa(){ 0返回数据；} public void setData(ListDouble data){ this。数据=数据；}公共系列(){超级()；} @将公共字符串重写为String(){ return ' Series[name=' name '，type=' type '，data=' data '，time=' time ']'；}}后台封装展示

/* * * */package.com我的希望。领域；导入Java。乌提尔。列表；/** *描述：br/*版权所有2017年，Jansonxu br/*本程序受版权法保护br/*计划名称：Echartsbr/*日期：2019年年一月14日* * @作者* @版本： 1.0 */公共类echart { private ListString legend；//nameprivate ListString轴；//横坐标私人列表系列；//数据项私有列表数据分析表数据分析表；public echart(ListString图例、列表字符串轴、列表系列系列、list data analysis table data analysis tables){ super()；this.legend=传奇；this . axis=axis this . series=series this。数据分析表=数据分析表；} public echart(){ super()；} public ListString getLegend(){ return legend；} public void setLegend(ListString legend){ this。图例=图例；} public ListString GetAxis(){ return axis；}public void setAxis(ListString轴){ this.axis=axis}公共列表系列getSeries(){ return series；} public void setSeries(列表系列系列){ this.series=series}公共列表数据分析表getdataanalysis tables(){ return dataanalysis tables；} public void setdataanalysis tables(list dataanalysis table dataanalysis tables){ this。数据分析表=数据分析表；} @将公共String重写为String(){ return ' echart[legend=' legend '，axis=' axis '，series=' series '，dataanalysis tables=' dataanalysis tables ']'；} }动作封装

将对应的东西传入页面即可

echart echart=new echart(legend，newAxis，series，)；string jsonString=com。阿里巴巴。法斯森。jsonobject。至jsonString(echart)；初始化展示文件

var DOM=文档。getelementbyid(' xsl ')；var myChart=echart。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 333:[{ type 3:clear()；myChart.setOption(选项，真)；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。