echarts结合ajax刷新数据

最新推荐文章于 2023-04-06 21:16:18 发布

若往夕之

最新推荐文章于 2023-04-06 21:16:18 发布

阅读量725

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/java_chegnxuyuan/article/details/103455400

js 专栏收录该内容

5 篇文章

订阅专栏

最近做了一个公司年会节目的投票系统。需要现在在大屏上实时显示票数。

后台就不展示了。很简单。

前端代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="lib/echarts/echarts.min.js"></script>
		<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
		<script type="text/javascript" src="lib/util524.js"></script>
		<title>票数展示</title>
		<style>
			html,body{
	            margin: 0;
	            padding: 0;
	            height: 100%;
	        }
	        #mian{
	        	border: 1px solid green;
				width: 50%;
				height: 100%;
				margin-left: 25%;
	        }
			#vote{
				height: 100%;
			}
			
		</style>
	</head>
	<body>
		<div id="mian">
			<div id="vote" ></div>
		</div>
		
	</body>
	
	<script>
		var myChart = echarts.init(document.getElementById('vote'));
		window.onresize = function(){
		    myChart.resize();
		}
		var num = [];
		var names = [];
		$.ajax({
			type:"get",
			url:ss.urlMapping['VOTELIST'],
			async:true,
			data:{},
			success:function(data){
				var list = data.data;
				for(var i=0;i<list.length;i++){
					num.push(list[i].pollNum)
					names.push(list[i].name)
					myChart.setOption({
						xAxis: {
                        	data: names
                       	},
                       	series: {
	                        data: num
		                }
					})
				}
			},
			error:function(data){
				
			}
		});
		
		
		function getData(val){
			$.ajax({
				type:"get",
				url:ss.urlMapping['VOTELIST'],
				async:true,
				data:{},
				success:function(data){
					num.length = 0;
					var list = data.data;
					for(var i=0;i<list.length;i++){
						num.push(list[i].pollNum)
						names.push(list[i].name)
					}
					myChart.setOption({
		               	series: {
		                    data: num
		                }
					})
				},
				error:function(data){
					
				}
			});
			
		}
		
		
		
		
		var option = {
			title: {
	            text: '票数展示',
	            subtext:'KUANG-CHI',
	            left:'center',
	            borderColor:'red',
	            borderWidth:1
	        },
	        color: ['#3398DB'],
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '1%',
		        containLabel: true,
		    },
		    xAxis : [
		        {
		            type : 'category',
		            data : [],
		            axisTick: {
		                alignWithLabel: true
		            },
		            axisLabel: {
				        show: true,
				        textStyle: {
				          color: 'black',  //更改坐标轴文字颜色
				          fontSize :18      //更改坐标轴文字大小
				        }
				    },
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            splitNumber : 10,
		        }
		    ],
		    series : [
		        {
		            //name:'直接访问',
		            type:'bar',
		            barWidth: '30%',
		            data:[],
		            itemStyle:{
		            	normal:{
		            		label:{
		            			show:true,
		            			position : 'top',
		            			textStyle : { //数值样式
									fontSize: 20,
									color: 'black',
								}
		            		}
		            	}
		            }
		        }
		    ]
		};
		
		function fetchData(cb){
			getData(cb);
			setInterval("getData()", 1000);
		}
		
		fetchData();
		
		myChart.setOption(option);
	</script>
</html>