ajaxDemo

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

于 2021-08-30 09:12:37 发布

阅读量172

点赞数

分类专栏：大数据hadoop 文章标签： ajax javascript html

本文链接：https://blog.csdn.net/qq_38999072/article/details/119989654

版权

大数据hadoop 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、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
评论
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
复制链接

扫一扫