ajaxDemo

一、ajax 请求后台JSON ,图形展示

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可视化页面</title>
        <script type="text/javascript" src="static/js/echarts.min.js"></script>
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<h1>视化页面</h1>
		</div>
		
		<table width="1400" border="0">
		<tr>
		<td colspan="2" style="width:600px;height:400px;">
		<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		</td>
		<td colspan="2" style="">
		<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
		<div id="main2" style="width: 600px;height:400px;"></div>
		</td>
		</tr>
		</table>

		
		<script type="text/javascript">
		  var linNames=[];
		  var linNums=[];

		  window.onload = function(){
			  // alert(11);
		      $.ajax({
		             type: "post",
		             url: "http://localhost:8080/ss/list",
		             data : {name:'11'},
		             cache : false,	//禁用缓存
		             dataType: "json",
		             success: function(result) {
		          	 console.log(result);
					 // alert(result);
					     
					// 		$.each(result.lin,function(key,values){  
			  
					// 			linNames.push(values.name);
					// 			linNums.push(values.age);
								
					// 		 });
							 
						for(var i=0;i<result.length;i++){
							linNames.push(result[i].name);    //挨个取出类别并填入类别数组
							
						}
						for(var i=0;i<result.length;i++){       
						   linNums.push(result[i].age);    //挨个取出销量并填入销量数组
						   
						}
						
						// 基于准备好的dom,初始化echarts实例
						var myChart = echarts.init(document.getElementById('main'));
									  
									  
									  // 指定图表的配置项和数据
									  var option = {
									      title: {
									          text: 'ECharts 入门示例'
									      },
									      tooltip: {},
									      legend: {
									          data:['学生年龄分布']
									      },
									      xAxis: {
									          data: linNames
									      },
									      yAxis: {},
									      series: [{
									          name: '销量',
									          type: 'bar',
									          data: linNums
									      }]
									  };
									  
									  // 使用刚指定的配置项和数据显示图表。
									  myChart.setOption(option);

					}
					 
			  });
			  
			  
			  
			  
			

		  }
		
var chartDom2 = document.getElementById('main2');
			  var myChart2 = echarts.init(chartDom2);
			  var option2;
			  
			  option2 = {
				  title: {
				      text: 'ECharts 饼形图'
				  },
			      series : [
			          {
			              name: '访问来源',
			              type: 'pie',
			              radius: '55%',
			              data:[
			                  {value:235, name:'视频广告'},
			                  {value:274, name:'联盟广告'},
			                  {value:310, name:'邮件营销'},
			                  {value:335, name:'直接访问'},
			                  {value:400, name:'搜索引擎'}
			              ]
			          }
			      ]
			  };
			  
			  option2 && myChart2.setOption(option2)
        
		</script>
	</body>

</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

醉卧千山下,诗酒趁年华。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值