ajax异步处理echarts图形

来源：互联网发布：黑帽seo技术到哪里学编辑：程序博客网时间：2024/06/06 02:21
下拉选择，不同仪器，异步加载出不同图形。
------------------------------------------------------------------------------------------------------------------------------------------
jsp页面
首选加载下拉框，写个onchange()事件
<select name="cars" id="wddata" style="border:none;" onchange="wdselect();"><%if(wdData!=null){for(int i=0;i<wdData.size();i++){List datawd =(List)wdData.get(i); %><option value="<%=datawd.get(0)%>"><%=datawd.get(1) %></option><% }}%>-----------------------------------------------------------------------------------------------------------函数：function wdselect(){    var wddata=$("#wddata").val();    //var wddata = document.getElementById("wddata").value;    var url='<%=basePath%>/wlw/shouyeManager.do?method=getwddata';  url=url+'&form.wddata='+wddata; $.ajax({          type:"POST", url:url,        dataType: 'json',              success:function(data){option.xAxis.data=data[0].aoption.series[0].data=data[0].b   require.config({           paths:{              echarts: 'http://echarts.baidu.com/build/dist'              }           });        require(           [               'echarts',               'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载           ],           function (echarts) {               // 基于准备好的dom，初始化echarts图表             var path0 =  echarts.init(document.getElementById('wdecharts'));            path0.setOption(option);                         }       );}         });         }-------------------------------------------------------------------------------------------------------------------------------echats: var option= {        'tooltip': {        'trigger': 'item'    },       'xAxis':  {    'name':'(h)',        'type': 'category',         'splitLine':{            show:false        },    //   'axisLabel': {// 'rotate': '20',// },        'boundaryGap': false,         'radius' : '55%',        'center': '[50%, 60%]',       'data': <%=form.getParasVal("jsonValx")%>    },    'grid': {'x': '30','x2': '30','y2': '22'},        'yAxis': {    'name':'',        'type': 'value',         'splitLine':{            show:false        },        'axisLabel': {            'formatter': '{value} '        }    },    'series': [        {            'name':'',            'type':'line',           'data': <%=form.getParasVal("jsonVal")%>,            'markPoint': {                data: [                    {'type': 'max', 'name': '最大值'},                    {'type': 'min', 'name': '最小值'}                ]            }        }    ]};require.config({           paths:{              echarts: 'http://echarts.baidu.com/build/dist'              }           });        require(           [               'echarts',               'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载           ],           function (echarts) {               // 基于准备好的dom，初始化echarts图表             var path0 =  echarts.init(document.getElementById('wdecharts'));            path0.setOption(option);                         }       );---------------------------------------------------------------------------------------------------------------------------------------后台代码public String getwddata() throws Exception{PrintWriter pw = response.getWriter();ShouyeForm sf=(ShouyeForm)form;ShouyeManager sm=(ShouyeManager)mgr;String wddata = sf.getWddata();List wdechartsDataList = sm.getwdEcharts(wddata);List data = getListJson(sf,wdechartsDataList);String dataStr0 = (String) data.get(0);String dataStr1=  (String) data.get(1);dataStr0 = dataStr0.substring(1,dataStr0.length()-1);//去除两边的中括号dataStr1 = dataStr1.substring(1,dataStr1.length()-1);String[] a = dataStr0.split(",");//转化成数组,echarts接受的数据是数组String[] b = dataStr1.split(",");Integer[] bb = new Integer[b.length];  for(int i=0;i<b.length;i++){     // string数组转化int数组bb[i]=Integer.parseInt(b[i]);}Map<String,Object > map = new HashMap<String, Object>();map.put("a",a);map.put("b",bb);//转化成jsonJSONArray obj = JSONArray.fromObject(map);sf.setParasVal("re",obj.toString());return "re";}
0 0