下拉选择,不同仪器,异步加载出不同图形。
------------------------------------------------------------------------------------------------------------------------------------------
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";
}