Echarts通过Ajax实现动态数据加载

最新推荐文章于 2023-04-03 14:28:14 发布

Mr_Runner

最新推荐文章于 2023-04-03 14:28:14 发布

阅读量1.4k

点赞数 3

分类专栏：前端文章标签： Echarts通过Ajax实现动态数据加载 Echarts Ajax实现动态数据加载 Echarts通过Ajax实现数据加载 Echarts Ajax数据加载

本文链接：https://blog.csdn.net/mr_runner/article/details/84796884

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

问题：Echarts通过Ajax实现动态数据加载

解决方案：通过将数据放在数组里面，加载到Echarts表上面

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
    <script type="text/javascript">
		
		 var names=[];    //类别数组（实际用来盛放X轴坐标值）
         var nums=[];    //销量数组（实际用来盛放Y坐标值）
		 
		$.ajax({
         type : "post",
         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "TestServlet",    //请求发送到TestServlet处
         data : {},
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
				 
                    for(var i=0;i<result.length;i++){       
                       names.push(result[i].name);    //挨个取出类别并填入类别数组
                     }
					 
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i].num);    //挨个取出销量并填入销量数组
                      }
					  
					//渲染图片
					echart(names,nums)
                    
             }
         
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    })
		
		
	function echart(names,nums){
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var option = {
			title: {
				text: 'ECharts 入门示例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: names
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: nums
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}	
    </script>
</html>

Mr_Runner

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Echarts通过Ajax实现动态数据加载

问题：Echarts通过Ajax实现动态数据加载解决方案：通过将数据放在数组里面，加载到Echarts表上面代码实现：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;
复制链接

扫一扫

专栏目录