ajax异步处理echarts图形

下拉选择,不同仪器,异步加载出不同图形。------------------------------------------------------------------------------------------------------------------------------------------jsp页面首选加载下拉框,写个onchange()事件if(
摘要由CSDN通过智能技术生成

下拉选择,不同仪器,异步加载出不同图形。

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

jsp页面

首选加载下拉框,写个onchange()事件

<select name="cars" id="wddata" style="border:none;" οnchange="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";
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值