xieshengjie
/
gdsx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/pages/includes/taglibs.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <%--<meta http-equiv="X-UA-Compatible" content="IE=7"></meta>--%>
 <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery-1.8.3.js"></script>

<script src="<%=request.getContextPath()%>/resource/js/datePicker/WdatePicker.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resource/plugin/jqueryui/css/custom-theme/jquery-ui-1.9.2.custom.css" />

    <script src="<%=request.getContextPath()%>/resource/js/echarts/echarts-all.js"></script>

<style type="text/css">


fieldset legend {  
    color:#302A2A;  
    font: bold 16px/2 Verdana, Geneva, sans-serif;  
    font-weight: bold;  
    text-align: left;  
    text-shadow: 2px 2px 2px rgb(88, 126, 156);  
}  

</style>
</head>
<body>

<form action="wpscatterIndex.action" method="post" id="f1">

<fieldset style="height: 60px" id="fst">
    <legend  class="item_Name">查询条件</legend>
   <table width="1000px" cellpadding="0" cellspacing="0" class="dataform">
	<tr>
		<th width="100px" class="item_Name">
			风场：
		</th>
		<td width="100px" class="item_Name">
			<s:select  list="wps" cssStyle="width:100px" listKey="id" listValue="name" id="wpId" name="wpId" ></s:select>
		</td>
	
		<th width="100px" class="item_Name">
			年份：
		</th>
		<td width="100px" style="text-align: left">
			<s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy',isShowWeek:true,readOnly:true})" 
			id="year" name="year" title="年份"  />
		</td>
		<th width="100px" class="item_Name">
			月份：
		</th>
		<td width="100px" style="text-align: left">
			<s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'MM',isShowWeek:true,readOnly:true})" 
			id="month" name="month" title="月份" />
		</td>
		<td width="200px" style="text-align: right">
			<input id="backbuttona" type="button" value="查询" onClick="queryData()" />
		</td>
		

	</tr>
</table>
  </fieldset>

<br/>


 <div id="main" style="height:700px;border:1px solid #ccc;padding:10px;"></div>

    
<script type="text/javascript">
    // Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
        // Step:3 echarts和zrender被echarts-plain.js写入为全局接口
        var myChart = echarts.init(document.getElementById('main'));
       var option = {
    title : {
        text: '场站功率风速排布情况'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
            if (params.value.length > 0) {
                return params.seriesName + ' :<br/>'
                   + params.value[0] + '万kw ';
            }
            else {
                return params.seriesName + ' :<br/>'
                   + params.value + '万kw ';
            }
        },  
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data:['功率']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            type : 'value',
            scale:true,
            splitNumber:25,
            axisLabel : {
                formatter: '{value} m/s'
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value} 万kw'
            }
        }
    ],
    series : [
        {
            name:'功率',
            type:'scatter',
            large: true,
            data: [
            ],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};
        
       
        // 使用刚指定的配置项和数据显示图表。
       queryData();
	function findscatter() {

	var wpId=$("#wpId").val();
	var year=$("#year").val();
	var month=$("#month").val();
	var url = "/scatter/scatterAjax.action?wpId="+wpId
					 +"&year="+year +"&month="+month;
	$.ajax({
		url : url,
		type : "post",
		cache : false,
		dataType : "json",
		async : false,
		data : {},
		ifModified : false,
		success : function(result) {
		
		
		 // 使用刚指定的配置项和数据显示图表。
		option.series[0].data = result;
        myChart.setOption(option);

				//options1.series[0].data = result;
				
				//chart1 = new Highcharts.Chart(options1);

		}
	});
	
	
}
 function getForm(){  
                                 //使用JQuery从后台获取JSON格式的数据  
            jQuery.getJSON('http://localhost/resource/josn/test.json', null, function(data) {  
                     
                                            //为图表设置值  
					                     // chart1.series[0].setData(data);                                             
               	 options1.series[0].data=data;  
                 chart1 = new Highcharts.Chart(options1);
            });  
        }  
	function queryData(){
		 if("" == $("#wpId").val()){
			alert("请选择风场!");
		}
		else if("" == $("#year").val()){
			alert("请选择年份!");
		}else if("" == $("#month").val()){
			alert("请选择月份!");
		}
		else{
			
			findscatter();
		}
	}
	

</script>
</form>

</body>