<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="../common/header.jsp"%>
<title>车辆统计</title>
<link rel="stylesheet" href="../../css/jquery.fancybox.css"
type="text/css" />
<style type="text/css">
html {
overflow: auto;
}
.botton {
padding: 5px 10px;
background-color: #22ab39;
border-radius: 5px;
border: 0px;
color: #fff;
font-size: 14px;
width: 120px;
margin: 0px 10px 10px 0px;
font-family: "Microsoft YaHei UI Light", "瀵邦喛钂嬮梿鍛寸拨";
}
.botton:hover {
background-color: #145d20;
}
</style>
<body>
<span style="color:#fff;">服务城市:</span>
<select id="selectCity" name="selectCity" class="easyui-combobox" style="width: 100px;">
<option value="-1">全部</option>
<option value="0">北京</option>
</select>
<input type="button" onclick="search();" value="查询" class="b_cx" />
<script src="../../js/echarts.js"></script>
<div id="main" style="height: 400px;width:100%;"></div>
<script type="text/javascript">
$(function() {
$("#main").height($(window).height()-80);
SetChart();
});
function SetChart() {
var myChart = echarts.init(document.getElementById('main'));
// Generate data
var category = [];
var dottedBase = +new Date();
var lineData = [];
var barData = [];
var result = [];
var result1 = [];
var result2 = [];
for (var i = 0; i < 20; i++) {
var date = new Date(dottedBase += 3600 * 24 * 1000);
category.push([ date.getFullYear(), date.getMonth() + 1,
date.getDate() ].join('-'));
var b = Math.random() * 200;
var d = Math.random() * 200;
barData.push(b)
lineData.push(d + b);
}
$.ajax({
type : "POST",
data:{
createStartTime:'',
createEndTime:''
},
url : "<%=request.getContextPath()%>/vehicleDataController/vehicleModleData",
dataType : "json",
async: false,//同步
success : function(msg) {
var data = msg.data;
var data1 = msg.data1;
var data2 = msg.data2;
if(data){
for(var i = 0;i<data.length;i++){
var veh = data[i];
result.push({
value:veh.status,
name:veh.carname
});
}
}
if(data1){
for(var i = 0;i<data1.length;i++){
var veh = data1[i];
result1.push({
value:veh.status,
name:veh.carname
});
}
}
if(data2){
for(var i = 0;i<data2.length;i++){
var veh = data2[i];
result2.push({
value:veh.status,
name:veh.carname
});
}
}
}
});
option = {
backgroundColor : '#ece6e6',
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} {b} :{d}%",
textStyle: {
fontSize:14
}
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
grid: [
{x: '7.5%',y: '65%', width: '88%', height: '30%'},
],
xAxis: [
{gridIndex: 0,
type: 'category',
axisTick: {
alignWithLabel: true
},
data: []},
],
yAxis: [
{gridIndex: 0,name:'年级',show:false
},
],
series : [
{
name: '车型',
type: 'pie',
radius : '40%',
center: ['15%', '40%'],
data:result,
label: {
normal: {
position: 'inner',
formatter: '{c}辆',
textStyle: {
color: '#ffffff',
fontSize: 14
}
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0)'
}
}
},
{
name: '租用状态',
type: 'pie',
radius : '40%',
center: ['45%', '40%'],
data:result1,
label: {
normal: {
position: 'inner',
formatter: '{c}辆',
offset: [,100],
textStyle: {
color: '#ffffff',
fontSize: 14
}
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0)'
}
}
},
{
name: '车辆状态',
type: 'pie',
radius : '40%',
center: ['75%', '40%'],
data:result2,
label: {
normal: {
position: 'inner',
formatter: '{c}辆',
textStyle: {
color: '#ffffff',
fontSize: 14
}
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0)'
}
}
}
]
};
myChart.setOption(option);
}
//查询按钮事件
function search()
{
$.ajax({
type : "POST",
data:{
createStartTime:'',
createEndTime:''
},
url : "<%=request.getContextPath()%>/vehicleDataController/vehicleModleData",
dataType : "json",
async: false,//同步
success : function(msg) {
var data = msg.data;
var data1 = msg.data1;
var data2 = msg.data2;
if(data){//车型 车辆总数
for(var i = 0;i<data.length;i++){
var veh = data[i];
result.push({
value:veh.status,
name:veh.carname
});
}
}
if(data1){//已租未租 车辆总数
for(var i = 0;i<data1.length;i++){
var veh = data1[i];
result1.push({
value:veh.status,
name:veh.carname
});
}
}
if(data2){//车辆状态 车辆总数
for(var i = 0;i<data2.length;i++){
var veh = data2[i];
result2.push({
value:veh.status,
name:veh.carname
});
}
}
}
});
}
</script>
<div class="main_search">
<div id="dateDiv" style="width: 100%; margin: 0px auto;"></div>
<div>
<table id="dg" style="width: 100%;"></table>
</div>
</div>
</body>
