weiyong
/
201912G14


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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" />
<title>Insert title here</title>
    <script src="js/jquery-1.12.4.js"></script>

    <script src="js/echarts.js"></script>
  </head>
  
  <body  οnlοad="loadData()">
  
  <!-- 画图 -->
<div id="content" style="margin:40px auto;width:1300px;height:400px">
  
 <div id="myBarDiv" style="height:300px;width:430px;display:inline-block"></div> 
 <div id="myLineDiv" style="height:300px;width:430px;display:inline-block"></div>
 
 <div id="myTest" style="width:600px;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="sub()">数据更新</button>
 </div>
</div>

 
<script type="text/javascript">
  function sub(){
   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 loadData(option){
   $.ajax({
    type:"post",                         //跳转方式为post
    async:false,                         //同步传输
    url:'barservice',      
    
    data:{},
    dataType:'json',           
    success:function(result){
     if(result){00
      option.xAxis[0].data=[];
      for(var i=0;i<result.length;i++){
       option.xAxis[0].data.push(result[i].name);  //设置横坐标的数据
      }
      
      //初始化series[0]的data
      option.series[0].data=[];
      for(var i=0;i<result.length;i++){
       option.series[0].data.push(result[i].num);   //设置纵坐标的数据
      }
     }
    },
    error:function(errorMsg){
     alert("数据加载失败");
    }
    
    
   });
  }
 //初始化Echarts
 var myChart=echarts.init(document.getElementById('myBarDiv'));
 var option={
  title:{
   text:'柱状图'
  },
  tooltip:{
   show:true
  },
  legend:{
   data:['销量']
  },
  xAxis:[{
  
   type:'category'
  }],
  yAxis:[{
   type:'value'
  }],
  series:[{
   name:'销量',
   type:'bar'
   
  }]
 };
 loadData(option);  //加载数据到option
 myChart.setOption(option);  //设置option（画图）
 </script>
 
 
 <script type="text/javascript">
 var myChart=echarts.init(document.getElementById('myLineDiv'));
 var option={
  title:{
   text:'折线图'
  },
  tooltip:{
   show:true,
   trigger:'item'
  },
  legend:{
   data:['销量']
  },
   toolbox:{   //工具栏组件
               show:true,
               feature:{  //需要的功能
                   saveAsImage:{
                       show:true
                   },                      //保存为图片
                   dataView:{
                       show:true          //数据视图
                   },
                   dataZoom:{
                       show:true            //区域缩放与区域缩放还原
                   },
                   magicType:{
                       type:['line','bar']       //动态类型转换
                   }
               }
           },
  xAxis:[{
  
   type:'category'
  }],
  yAxis:[{
   type:'value'
  }],
  series:[{
   name:'销量',
   type:'line'
   
  }]
 };
 loadData(option);  //加载数据到option
 myChart.setOption(option);  //设置option
 </script>
 
</body>
</html>