echarts使用ajax动态设置x轴和y轴数据 -六月初技术站

echarts使用ajax动态设置x轴和y轴数据

六月初 Echarts 2023-02-05 23:50:46

echarts是一款非常火热的可视化图表库，在我们的应用中也应用的极为频繁。

那么关于该可视化图表库，我们要如何结合动态数据来动态展示数据呢？

本文通过完整代码展示如何通过ajax动态给echarts赋值，如图点击动态数据，模拟请求ajax动态生成xy轴数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 400px;"></div>
		<button onClick="setClick()">动态数据</button>
		<script>
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
			  xAxis: {
			    type: 'category',
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      data: [150, 230, 224, 218, 135, 147, 260],
			      type: 'line'
			    }
			  ]
			};
			myChart.setOption(option);
			function setClick(){
				myChart.showLoading();//显示加载动画
				//模拟ajax请求
				setTimeout(function(){
					myChart.hideLoading();    //隐藏加载动画
					myChart.setOption({        //加载数据图表
						xAxis:[
							{data:['Mon', 'Tue']},
						],
						series: [
							{data:[150, 230]},
						]
					});
				},2000)
				// ajax请求
				$.ajax({
				     type: 'post',
				     url: "数据请求地址",
				     contentType: 'application/json',
				     // contentType: 'application/x-www-form-urlencoded',
				     success: function (res) {
						myChart.hideLoading();    //隐藏加载动画
						myChart.setOption({        //加载数据图表
							xAxis:[
								{data:['Mon', 'Tue']},
							],
							series: [
								{data:[150, 230]},
							]
						});
					 },
				     // xhr是ajax对象
				     error: function (xhr) {}
				});
			}
		</script>
	</body>
</html>