weiyong
/
201912G14


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
							<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- <%
if(request.getSession().getAttribute("user")==null){
	response.sendRedirect("main.jsp");
}
%> --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" href="css/echart.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" />
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>统计图</title>

      <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
   <script src="js/highcharts/highcharts.js"></script>
    <script src="js/highcharts/highcharts-more.js"></script>
    <script src="js/highcharts/modules/exporting.js"></script>
    <script src="js/highcharts/modules/map.js"></script>
<script src="https://data.jianshukeji.com/geochina/guangdong.js"></script>

  </head>
    <style>
    body{
    background-image:url(images/bg4.png);
  background-size: cover;
  position: absolute;


    }
  </style>
  <body  style:"text-align:center;" οnlοad="loadData()">

  <!-- 画图 -->  
<!--头部-->

<!--主体-->
<div class="main clearfix">
    <div class="main-left">
        <div class="border-container">
            <div class="name-title">
                ===
            </div>
             <div id="echart1" style="width:100%; height: 300px;;margin:0 auto"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">
               ===
            </div>

               <div id="echart5" style="width:100%; height: 300px;;margin:0 auto"></div>

            <ul class="three-pie clearfix">
                <li>
                    
                  <div id="echart7" style="min-width:400px;height:400px"></div>
                </li>
               
            </ul>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    <div class="main-middle">
        <div class="border-container">
              <div id=map  style="width:100%; height: 100%;text-align:center"></div>
            <div class="number-show">
              
            </div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <ul class="teacher-pie clearfix">
                <li>
                    <div class="name-title">
                        =======
                    </div>
               <div id="echart6" style="width:100%; height: 100%;margin:0 auto"></div>

                </li>
                <li>
                    <div class="name-title">
                       =======
                    </div>
                    <div id=echart3  style="width:100%; height: 100%;text-align:center"></div>
                </li>
            </ul>

            <div class="name-title">
                ===
            </div>
           <div id="myTest" style="width:700px;height:60px;margin:20px auto">
                <label for="name">地名：</label><input type="text" id="myName">
                <label for="num">销量：</label><input type="text" id="myNum">
                <button id="myButton" type="submit" onClick="su()" style="display:inline-block;">更新</button>
                <button id="myButton1" type="submit" onClick="del()" style="display:inline-block;">删除</button>
                <button id="myButton2" type="submit" onClick="save()" style="display:inline-block;">增加</button>
            
            </div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    <div class="main-right">
        <div class="border-container">
            <div class="name-title">
                ===各市的iPhone销售量(虚拟)
            </div>
              
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">
             	===
            </div>
           <div id=echart4  style="width:100%; height: 300px;display:inline-block;margin:0 auto"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">
                ===<h1 style="color:#180909;font-size:20px">漏斗图</h1>
            </div>
   <div id=echart2  style="width:110%; height:300px;margin:0 auto"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
</div>


<script type="text/javascript">
//数据插入
  function su(){
   var j={"name":$("#myName").val(),"num":$("#myNum").val()};
   $.ajax({
    type:'post',
    url:'jsoService',
    dataType:'json',
    data:{"name":$("#myName").val(),"num":$("#myNum").val()},
    contentType:"application/x-www-form-urlencoded",
    success:function(message){
     alert("success");
    }
   
   });
   window.location.reload();
  }
 </script>
 
  <script type="text/javascript">
  //数据删除
  function del(){
   var j={"name":$("#myName").val()};
   $.ajax({
    type:'post',
    url:'delServlet',
    dataType:'json',
    data:{"name":$("#myName").val()},
    contentType:"application/x-www-form-urlencoded",
    success:function(message){
     alert("success");
    }
                                               
   
   });
   window.location.reload();
  }
 </script> 
 
 
<script type="text/javascript">
//数据插入
  function save(){
   var j={"name":$("#myName").val(),"num":$("#myNum").val()};
   $.ajax({
    type:'post',
    url:'saveService',
    dataType:'json',
    data:{"name":$("#myName").val(),"num":$("#myNum").val()},
    contentType:"application/x-www-form-urlencoded",
    success:function(message){
     alert("success");
    }
   
   });
   window.location.reload();
  }
 </script>
 
 
    <!--柱状图 这是用hightchart插件与其他不同  -->
 
 <script>
$.ajax({
    type : "post",
    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url : "barservice",    //请求发送到TestServlet处
    data : {},
    dataType : "json",        //返回数据形式为json
    success : function(result) {
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        if (result) {
 
         	var names1=[];
        	for(var i=0;i<result.length;i++){
        	names1[i]=result[i].name;
        	}
        	
        	
          var values=[];   

          for(var i=0;i<result.length;i++){
             
             values[i]=result[i].num;
          }  
          
var chart = new Highcharts.Chart({
	chart: {
		backgroundColor: 'rgba(0,0,0,0)',
		renderTo: 'echart1',
		type: 'column',
		options3d: {
			enabled: true,
			alpha: 25,
			beta: 15,
			depth: 50,
			viewDistance: 25
		}
	},
	title: {
		text: '柱状图'
	},

	plotOptions: {
		column: {
			depth: 25
		}
	},
	xAxis: {
		categories:names1
},
	series: [{
		color:"A02B89",
		name:'销量',
		data:values
	}]
});

        }
        
        
    },
     error : function(errorMsg) {
         //请求失败时执行该函数
     alert("图表请求数据失败!");
     
     }
});
 

</script>


   <!--漏斗图  -->
  <script type="text/javascript">
    var myChart3= echarts.init(document.getElementById('echart2'));  
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "barservice",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
          
            	var names=[];
            	for(var i=0;i<result.length;i++){
            	names[i]=result[i].name;
            	}
            	    	
                var datass=[];

                for(var i=0;i<result.length;i++){
                    var obj=new Object();
                    obj.name=result[i].name; 
                    obj.value=result[i].num;
                    datass[i]=obj;
                }
                 myChart3.hideLoading();    //隐藏加载动画
                   myChart3.setOption({        //加载数据图表           	   
                      
                       tooltip: {
                           trigger: 'item',
                           formatter: "{a} <br/>{b} : {c} ({d}%)"
                       },
                 
                	   legend: {
                           data: names
                       },
                      /*  legend: {
                           data: ['展现','点击','访问','咨询','订单']
                       }, */
                       calculable: true,
                       series: [
                           {
                               name:'销量',
                               type:'funnel',
                               left: '10%',
                               top: 60,
                               //x2: 80,
                               bottom: 60,
                               width: '80%',
                               // height: {totalHeight} - y - y2,
                               min: 0,
                               max: 500,
                               minSize: '0%',
                               maxSize: '500',
                               sort: 'descending',
                               gap: 2,
                               label: {
                                   show: true,
                                   position: 'inside'
                               },
                               labelLine: {
                                   length: 10,
                                   lineStyle: {
                                       width: 1,
                                       type: 'solid'
                                   }
                               },
                               itemStyle: {
                                   borderColor: '#fff',
                                   borderWidth: 1
                               },
                               emphasis: {
                                   label: {
                                       fontSize: 20
                                   }
                               },
                               data:datass
                           }
                       ]  
                	   
                	   
            });
            }
       },
        error : function(errorMsg) {
            //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart2.hideLoading();
        }
   })
</script>

  
<!-- 折线图 -->
 <script type="text/javascript">

 $.ajax({
     type : "post",
     async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
     url : "barservice",    //请求发送到TestServlet处
     data : {},
     dataType : "json",        //返回数据形式为json
     success : function(result) {
         //请求成功时执行该函数内容，result即为服务器返回的json对象
         if (result) {
  
          	var names1=[];
         	for(var i=0;i<result.length;i++){
         	names1[i]=result[i].name;
         	}
         	
         	
           var values=[];   

           for(var i=0;i<result.length;i++){
              
              values[i]=result[i].num;
           }  
 var chart = Highcharts.chart('echart3', {
     chart: {
         type: 'line',
 		backgroundColor: 'rgba(0,0,0,0)',

     },
     title: {
         text: '折线图'
     },
   
     xAxis: {
         categories:names1
     },
     yAxis: {
         title: {
             text: '销量'
         }
     },
     plotOptions: {
         line: {
             dataLabels: {
                 // 开启数据标签
                 enabled: true
             },
             // 关闭鼠标跟踪，对应的提示框、点击事件会失效
             enableMouseTracking: false
         }
     },
     series: [{
         name: '销量',
         color:"#a90c16",
         data:values
     }]
 });
         }
         
         
     },
      error : function(errorMsg) {
          //请求失败时执行该函数
      alert("图表请求数据失败!");
      
      }
 });

 </script>
 
 
 <!-- 饼图 -->
  <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('echart4'));
         // 显示标题，图例和空的坐标轴
         myChart.setOption({
        	  title:{
        		   text:'饼图'
        		  },
        		  legend:{
        			   data:['销量']
        			  },
             series : [
                 {
                    
                     type: 'pie',
                     radius: '55%',
                     data:[
                         {value:0,name:'无'},
                     ],
      
                     roseType: 'angle',//通过设置 roseType 显示成南丁格尔图
                     label: {
                         normal: {
                             show: true,
                             formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                         }
                     },

                     emphasis: {
                         shadowBlur: 200,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                     },
                  

             ]
         });
         
         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         
         var names=[];    //类别数组（实际用来盛放X轴坐标值）
         var nums=[];    //销量数组（实际用来盛放Y坐标值）
         
         $.ajax({
         type : "post",
         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "barservice",    //请求发送到TestServlet处
         data : {},
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
            	  var servicedata=[];

                  for(var i=0;i<result.length;i++){
                      var obj=new Object();
                      obj.name=result[i].name; 
                      obj.value=result[i].num;
                      servicedata[i]=obj;
                  }

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                      
                    	  series : [
                              {
                                  name: '销售liang',
                                 
                                  data:servicedata,
                             
                                 
                              }
                          ]
                    
             });
             }
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    })

         
    </script>
 
 
 <!-- 雷达图  这是用highcharts插件与其他不同  并且js中出现$字符前面必须加转义字符\  否则会与tomcat保错不能运行-->
  <script>
  $.ajax({
      type : "post",
      async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
      url : "barservice",    //请求发送到TestServlet处
      data : {},
      dataType : "json",        //返回数据形式为json
      success : function(result) {
          //请求成功时执行该函数内容，result即为服务器返回的json对象
          if (result) {
   
           	var names1=[];
          	for(var i=0;i<result.length;i++){
          	names1[i]=result[i].name;
          	}
          	
          	
            var values=[];   

            for(var i=0;i<result.length;i++){
               
               values[i]=result[i].num;
            }  
            
            var chart = Highcharts.chart('echart5', {
            	
            	  chart: {
                      polar: true,
                      type: 'line',
                    	  backgroundColor: 'rgba(0,0,0,0)'
                  },
                  title: {
                      text: '雷达图',
                      x: -80
                  },
                  pane: {
                      size: '80%'
                  },
                  xAxis: {
                      categories:names1,
                      tickmarkPlacement: 'on',
                      lineWidth: 0
                  },
                  yAxis: {
                      gridLineInterpolation: 'polygon',
                      lineWidth: 0,
                      min: 0
                  },
                  tooltip: {
                      shared: true,
                      pointFormat: '<span style="color:{series.color}">{series.name}: <b>\${point.y:,.0f}</b><br/>'
                  },
                  legend: {
                      align: 'right',
                      verticalAlign: 'top',
                      y: 70,
                      layout: 'vertical'
                  },
                  series: [{
                      name: '销量',
                      data:values,
                      
                      pointPlacement: 'on'
                  }]
            });
            
          }
          
          
     },
      error : function(errorMsg) {
          //请求失败时执行该函数
      alert("图表请求数据失败!");
      
      }
 });
  
 
</script>
  
  
  <!-- 曲线图 -->
 <script type="text/javascript">
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "barservice",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
     
             	var names1=[];
            	for(var i=0;i<result.length;i++){
            	names1[i]=result[i].name;
            	}
            	
            	
              var values=[];   

              for(var i=0;i<result.length;i++){
                 
                 values[i]=result[i].num;
              }  
    var chart = Highcharts.chart('echart6', {
        chart: {
            type: 'areaspline',
            backgroundColor: 'rgba(0,0,0,0)'
        },
        title: {
            text: '曲线图'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories:names1,

        },
        yAxis: {
            title: {
                text: '销量'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' 元'
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            }
        },
        series: [{
        	color:"#150a10",
            name: '销量',
            data:values
        }]
    });
            }
            
            
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         
         }
    });
</script>
		
  
  <!--地图  -->
  <script>
// 随机数据

  $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "barservice",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
              var servicedata=[];

              for(var i=0;i<result.length;i++){
                  var obj=new Object();
                  obj.name=result[i].name; 
                  obj.value=result[i].num;
                  servicedata[i]=obj;
              }

              
var data =servicedata 
	
	// 初始化图表
var map = new Highcharts.Map('map', {
	 chart: {
       
         backgroundColor: 'rgba(0,0,0,0)'
     },
    
     
  title: {
    text: '广东省'
  },
  colorAxis: {
    min: 0,
    minColor: 'rgb(255,255,255)',
    maxColor: '#006cee'
  },
  colorAxis: {
		min: 1,
		type: 'logarithmic',
		minColor: '#EEEEFF',
		maxColor: '#000022',
		stops: [
			[0, '#EFEFFF'],
			[0.67, '#4444FF'],
			[1, '#000022']
		]
	},
  series: [{
	  color:"#150a10",
    data: data,
    name: '销量',
    mapData: Highcharts.maps['cn/guangdong'],
    joinBy: 'name' // 根据 name 属性进行关联
  }]
});
    }
            
            
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         
         }
    });
</script>
  
  
  <!-- 环形图 -->
  <script type="text/javascript">
  $.ajax({
      type : "post",
      async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
      url : "barservice",    //请求发送到TestServlet处
      data : {},
      dataType : "json",        //返回数据形式为json
      success : function(result) {
          //请求成功时执行该函数内容，result即为服务器返回的json对象
          if (result) {
   
           	var names1=[];
          	for(var i=0;i<result.length;i++){
          	names1[i]=result[i].name;
          	}
          	
          	 var servicedata=[];

             for(var i=0;i<result.length;i++){
                 var obj=new Object();
                 obj.name=result[i].name; 
                 obj.value=result[i].num;
                 servicedata[i]=obj;
             }

           
            var values=[];   

            for(var i=0;i<result.length;i++){
               
               values[i]=result[i].num;
            } 
    var mychart= echarts.init(document.getElementById('echart7'));
mychart.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:names1
    },
    series: [
        {
            name:'销量',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:servicedata
        }
    ]
    });

          }
          
          
      },
       error : function(errorMsg) {
           //请求失败时执行该函数
       alert("图表请求数据失败!");
       
       }
  });


    </script>
  
  
</body>


</html>