微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

	//初始化图表
					var bazxChart = echarts.init(document.getElementById("form1"));
					
					//给图写上认配置,暂时不给数据
					bazxChart.setoption({
						 tooltip: {
						 	trigger : 'item'
						 },
			             legend: {
			                 data:['数量'],
			                 textStyle : {
								color : '#fff'
							}
			             },
			             xAxis: {
			                 data: [],
			                 axisLabel: {
	                            show: true,
	                            textStyle: {
	                                color: '#fff'
	                            }
	                        }
			             },
			             yAxis: {
			             	axisLabel : {
                            formatter: '{value}',
	                            textStyle: {
	                                color: '#fff'
	                            }
	                        }
			             },
			             series: [{
			                 name: '数量',
			                 type: 'bar',
			                 data: []
			             }]
					});
					
					//数据加载之前先加载动画
					bazxChart.showLoading();
					
					//声明数组用于数据
					var keys = [];
					var va = [];
					
					$.ajax({
						type : 'post',
						url : '/qb/business/mh/mhAction$getBazx',
						dataType : 'text',
						success : function(data){
						//解析json,并将json数据放到声明的空数组中
							var hh = $.parseJSON(data);
							$.each(hh,function(k,v){
								keys.push(k);
								va.push(v);
							});
							
							//隐藏加载动画
							bazxChart.hideLoading();
							
							//填充数据
							bazxChart.setoption({
								xAxis:{
									data : keys
								},
								series:[{
									name : '数量',
									type: 'bar',
									data : va
								}]
							});
						},
						error : function() {
							alert("图表请求数据失败!");
         					bazxChart.hideLoading();
						}
					});

注意:echarts版本需要3以上

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐