如何在ajax中动态填充echarts中的内容

  老规矩，先上界面看看。

 

1. 导入echar和jquery的js，导入方法看官网文档->教程 ，如下图所示。Jquery的js百度即可

   

2. 下面是我的实现代码，目的是为了分享一下自己的想法，仅供参考。如由更好的实现方法，欢迎评论！

  写一个div即可

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="bar_graph" style="width: 600px;height:400px;"></div>

 js代码如下

<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var bar_graph = echarts.init(document.getElementById('bar_graph'));
		var dashboard = echarts.init(document.getElementById('dashboard'));
		var ajaxUrl = ;
		bar_graph.showLoading(); //数据加载完之前先显示一段简单的loading动画
		dashboard.showLoading();
		var names = []; //列名
		var nums = []; //列值
		var rightTotal = 0; //消息正确总数
		var errorTotal = 0; //异常总数
		$.ajax({
			type : 'GET',
			url : ajaxUrl,
			dataType : 'JSON',
			success : function(result) {
				var data = result.data;
				if (result.success) {
					for (i = 0; i < data.length; i++) {
						//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
						names.push(data[i].countDate.substr(11, 5));
						nums.push(data[i].rightLogNum + data[i].errorLogNum);
						rightTotal += data[i].rightLogNum;
						errorTotal += data[i].errorLogNum;
					}
					bar_graph.hideLoading(); //隐藏加载动画
					bar_graph.setOption({ //加载数据图表
						title : {
							text : '消息总数条形图(近一小时)'
						},
						tooltip : {},
						legend : {
							data : [ '消息数量' ]
						},
						xAxis : {
							data : names
						},
						yAxis : {},
						series : [ {
							name : '消息数量',
							type : 'bar',
							data : nums
						} ]
					});
					var rightPercentage = toPercent(rightTotal, rightTotal + errorTotal);
					var errorPercentage = toPercent(errorTotal, rightTotal + errorTotal);
					var rightValue = rightPercentage.split("%")[0];
					console.log(rightValue);
					
					//初始化饼图
					$("#r_span").text(rightPercentage);
					$("#e_span").text(errorPercentage);
					var pieData = [
						{
							value : errorTotal,
							color : "#ea4c89"
						},
						{
							value : rightTotal,
							color : "#00C6D7"
						}
	
					];
					new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
	
					dashboard.hideLoading();
					//初始化仪表盘
					option = {
						tooltip : {
							formatter : "{a} <br/>{b} : {c}%"
						},
						toolbox : {
							feature : {
								restore : {},
								saveAsImage : {}
							}
						},
						series : [
							{
								name : '指标',
								type : 'gauge',
								detail : {
									formatter : '{value}%'
								},
								data : [ {
									value : rightValue,
									name : '成功率'
								} ]
							}
						]
					};
					
					setInterval(function() {
						dashboard.setOption(option, true);
					}, 2000);
	
	
				} else {
					alert('图表请求数据失败!');
				}
			},
			error : function(errorMsg) {
				alert('图表请求数据失败!');
			}
		});
	
	
		//计算百分比
		function toPercent(num, total) {
			return (Math.round(num / total * 10000) / 100.00 + "%"); // 小数点后两位百分比
		}
	</script>

  3.大功告成