Echarts动态数据加载

一.饼形图
html页面：

<script src="../scripts/echarts.min.js" type="text/javascript"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:100%; height:400px;"></div>

js代码：

var myChart = echarts.init(document.getElementById('main'));
				// 显示标题，图例和空的坐标轴
				myChart.setOption({
					color : [ '#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22","#B848C2","#696969" ], //颜色
					title : {
						text : '元数据指标',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',   //触发类型，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
						formatter : "{a} <br/>{b} : {c} ({d}%)"  //字符串模板
					},
                   legend : {				     
						orient : 'vertical',   //图例列表的布局朝向  
						x : 'left',      //可设置位置
						data : []  
					},
					toolbox : {
						show : true,  //是否显示工具栏组件     右上角工具栏
						feature : { 
							make : {   //自定义工具按钮
								show : true
							},
							dataView : {
								show : true, 
								readOnly : false
							},
							magicType : {
								show : true,
								type : [ 'pie', 'funnel' ],  //标题文本
								option : {       //各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项
									funnel : {
										x : '25%',
										width : '50%',
										funnelAlign : 'left',
										max : 1548
									}
								}
							},
							restore : {                //配置项还原  
								show : true
							},
                            saveAsImage : {           //保存为图片
								show : true,
								type : 'png'                         //保存的图片格式支持 'png' 和 'jpeg'
							                       }
						             }
					          },
					         series : [ {
						         name : '指标详情',
						            type : 'pie',
						            radius : '55%',
					             	center : [ '50%', '60%' ],
						            data : []
				          	     } ]
				              });
				     myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
				     var names = []; //类别数组（用于存放饼图的类别）
				     var brower = [];
				     var result = getServerData({}, "admin_client/dataAnalysis/module/echartsText.xml");
						//请求成功时执行该函数内容，result即为服务器返回的json对象
						$.each(result.ROWS, function(index, item) {
							names.push(item.NAME); //取出类别填入类别数组 
							brower.push({
								name : item.NAME,    //根据自己查询的数据来写
								value : item.STA
							});
						});
						myChart.hideLoading(); //隐藏加载动画
						myChart.setOption({ //加载数据图表                
							legend : {
								data : names
							},
							series : [ {
								data : brower
							} ]
						   });      

getServerData（）改成自己的ajax请求

json数据：

效果图：

二.柱形图
html文件：

<script src="../scripts/echarts.min.js" type="text/javascript"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

js文件：

var myChart = echarts.init(document.getElementById('main'));
			// 显示标题，图例和空的坐标轴
			myChart.setOption({
				title : {
					text : '元数据指标'
				},
				tooltip : {},
				legend : {
					data : [ '指标' ]
				},
				xAxis : {
					data : []
				},
				yAxis : {},
				series : [ {
					name : '指标',
					type : 'bar',
					data : []
				} ]
			});
            myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
	
			var names = []; //类别数组（实际用来盛放X轴坐标值）
			var nums = []; //指标数组（实际用来盛放Y坐标值）
	
			var result = getServerData({}, "admin_client/dataAnalysis/module/echartsText.xml");
	            
			if (result) {
				for (var i = 0; i < result.ROWS.length; i++) {
	
					names.push(result.ROWS[i].NAME); //挨个取出类别并填入类别数组
				}
				for (var i = 0; i < result.ROWS.length; i++) {
					nums.push(result.ROWS[i].STA); //挨个取出销量并填入销量数组
				}
				myChart.hideLoading(); //隐藏加载动画
				myChart.setOption({ //加载数据图表
					xAxis : {
						data : names
					},
					series : [ {
						// 根据名字对应到相应的系列
						name : '指标',
						data : nums
					} ]
				});
			}

效果图：

echarts配置项手册：https://echarts.baidu.com/option.html#title