echarts 3.0

最新推荐文章于 2022-01-19 14:06:23 发布
diaokang2511
最新推荐文章于 2022-01-19 14:06:23 发布
阅读量138
点赞数
文章标签： ui json java
原文链接：http://www.cnblogs.com/cuijinlong/p/7043343.html
版权
<%@ 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" οnclick="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>