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以上

上一篇:【01背包DP练习】洛谷 P1048采药 P1060开心的金明


下一篇:C和C指针小记(十一)-函数的可变参数表