动态柱状图echart+ajax

最新推荐文章于 2021-10-14 15:28:23 发布

墨客带刀

最新推荐文章于 2021-10-14 15:28:23 发布

阅读量299

点赞数

文章标签： ecahrt ajax

本文链接：https://blog.csdn.net/qq_44006838/article/details/102651349

版权

动态柱状图echart+ajax

设置好echart图形
将需要动态获取的数据数组改为空数组
使用ajax解析
设置数组中元素的最大值
设置定时器
确保json中有数据，并且数组中的元素没有超过最大值，往数据数组中添加元素
确保json中有数据，并且超过先前定义的最大值，则删除数组的第一个元素

ajax解析的部分根据自己的json来定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jQuery1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 400px;float:left" ></div>
	</body>
	
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		option = {
		    title: {
		        text: '动态数据',
		        subtext: '纯属虚构'
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            label: {
		                backgroundColor: '#283b56'
		            }
		        }
		    },
		    legend: {
		        data:['最新成交价', '预购队列']
		    },
		    toolbox: {
		        show: true,
		        feature: {
		            dataView: {readOnly: false},
		            restore: {},
		            saveAsImage: {}
		        }
		    },
		    dataZoom: {
		        show: false,
		        start: 0,
		        end: 100
		    },
		    //-----------------------------------
		    xAxis: [
		        {
		            type: 'category',
		            boundaryGap: true,
		            data:[]
		        },
		        {
		            type: 'category',
		            boundaryGap: true,
		            data: []
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            scale: true,
		            name: '价格',
		            min:0,
		            boundaryGap: [0.2, 0.2]
		        },
		        {
		            type: 'value',
		            scale: true,
		            name: '预购量',
					min:0,
		            boundaryGap: [0.2, 0.2]
		        }
		    ],
		    series: [
		        {
		            name:'预购队列',
		            type:'bar',
		            xAxisIndex: 1,
		            yAxisIndex: 1,
		            data:[]
		        },
		        {
		            name:'最新成交价',
		            type:'line',
		            data:[]
		        }
		    ]
		};
		
		myChart.showLoading(); //loading动画
		$.ajax({
		    type : "post",
		    async : true,
		    url : "new_file.php",
		    dataType:"json",
		    success:function(result) {
		        if(result){
					var obj = JSON.stringify(result);	//JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
														// JSON.parse() 方法用于将一个 JSON 字符串转换为对象,
					myChart.hideLoading();				//将之前设置的loading动画隐藏
					
				    // 动态添加
				    var count = 0;
				    var i = 0;
					var myInterval = setInterval(function (){
						// 抓取目标
							var seriesData0 = option.series[0].data;
							var seriesData1 = option.series[1].data;
							var xAxisData0  = option.xAxis[0].data;
							var xAxisData1  = option.xAxis[1].data;
							// var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
						// 移除----json中有数据并且echart数组的个数超过9,否则不移除echart数组中的第一个元素
							if(result.xAxisData0[i] 	&& i>9){
								// 移除第一个元素
								seriesData0.shift();
								seriesData1.shift();
								
								xAxisData0.shift();
								xAxisData1.shift();
							}
						// 添加----json中数据为真,否则不添加新元素
							if(result.xAxisData0[i]){
								// 添加新数据
								seriesData0.push(result.seriesData0[i]);
								seriesData1.push(result.seriesData1[i]);

								xAxisData0.push(result.xAxisData0[i]);
								xAxisData1.push(count++);
							}	
					   //渲染
						myChart.setOption(option);
						i++;
				    }, 1000);
		        }              
		    },
		    error : function(errorMsg) {
		        //请求失败时执行该函数
			    alert("请求数据失败!");
			    myChart.hideLoading();
		    },
			
		});
		
		myChart.setOption(option);
	   
	</script>
</html>