ajax異步處理echarts圖形

下拉選擇，不同儀器，異步加載出不同圖形。

------------------------------------------------------------------------------------------------------------------------------------------

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].a
option.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);
//轉化成json
JSONArray obj = JSONArray.fromObject(map);
sf.setParasVal("re",obj.toString());
return "re";
}