Echarts获取数据绘制图表

这次是利用mui框架实现一个手机移动端的项目。基本的框架已经实现，主要来获取数据实现一个图表的展示。

首先引入插件：echarts.js

<script src="../resources/js/echarts.js" type="text/javascript" charset="utf-8" ></script>

然后再html页面，给图表一个空间，以便放置图表:

<div class="pie_menu">
	<div class="left_menu" id="left_menu"></div>
</div>
<div class="pie_menu">
	<div class="right_menu" id="right_menu"></div>
</div>
需要做两个图表，所以就开了两个空间

接下来是获取数据部分：

$(function(){
	mui.init();//初始化mui
	var leftPie;//部门:第一个空间
	var rightPie;//类型:第二个空间
	var data = [];//第一个空间的数据配置
	var data2 = [];//第二个空间的数据配置
	function setOption(data){
		var leftMenu = echarts.init(document.getElementById('left_menu'));
		var rightMenu = echarts.init(document.getElementById('right_menu'));
		window.onresize = (leftMenu.resize && rightMenu.resize);//图表随着屏幕变化而变化
		//类型图表配置
		rightOption = {	//类型
				title : {
      		         text: '点统计(按类型)',//图表标题
      		         x:'center'	//图表位置样式
      		     },
      		   tooltip : {
      		        trigger: 'item',
      		        formatter: "{a} <br/>{b} : {c} ({d}%)"	//鼠标悬浮显示数据
      		    },
      		  legend: {	//图标，图示
     		        orient: 'vertical',
     		        bottom:30,
     		        left: 'left',
     		        data: data	//此数据和series内的数据相同（此项是获取之后的数据）
     		    },
     		   color:[ '#EB7C30' , '#5A99D3'],	//颜色指定
      		  series : [
	       		        {
	       		            name: '点统计',
	       		            type: 'pie',
	       		            radius : '55%',
	       		            center: ['55%', '50%'],
	       		            label: {
	       		            	normal: {
	       		            		formatter: "{c}\n({d}%)",	//在图标上显示的数据
	       		            		show: true,
	       		            		position: 'inner',//文字显示位置
	       		            	textStyle: {
	       		            		fontSize: '14',
	       		            		fontWeight: 'normal'
	       		            		}
	       		            	}
	       		            },
	       		         data:data,//此项同是获取的数据
	       		            itemStyle: {
	       		                emphasis: {	//饼图或柱状图显示的样式
	       		                    shadowBlur: 10,
	       		                    shadowOffsetX: 0,
	       		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	       		                }
	       		            }
	       		        }
	       		    ]
		}
　　　　　　　　　　//部门图表数据配置
		leftOption = {	//部门
				title : {
      		         text: '点统计(按部门)',//标题
      		         x:'center'	//样式
      		     },
      		   tooltip : {
      		        trigger: 'item',
      		        formatter: "{a} <br/>{b} : {c} ({d}%)"	//悬浮显示数据　　a:代表标题;b代表name值；c代表name的value值；d代表百分比数值;这四个各有各的好处，可尝试，主要是数据显示啦
      		    },
      		  legend: {	//图标，图示
     		        orient: 'vertical',
     		        bottom:30,
     		        left: 'left',
     		        data: data2
     		    },
     		   color:['#5A99D3', '#FFBF00','#A5A5A5','#EB7C30'],	//颜色指定
      		  series : [
	       		        {
	       		            name: '监控点统计',
	       		            type: 'pie',
	       		            radius : '55%',
	       		            center: ['55%', '50%'],
	       		            label: {
	       		            	normal: {
	       		            		formatter: "{c}\n({d}%)",	//在图标上显示的数据
	       		            		show: true,
	       		            		position: 'inner',//文字显示位置
	       		            	textStyle: {
	       		            		fontSize: '14',
	       		            		fontWeight: 'normal'
	       		            		}
	       		            	}
	       		            },
	       		         data:data2,
	       		            itemStyle: {
	       		                emphasis: {	//饼图或柱状图显示的样式
	       		                    shadowBlur: 10,
	       		                    shadowOffsetX: 0,
	       		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	       		                }
	       		            }
	       		        }
	       		    ]
		}
		leftMenu.setOption(leftOption);//部门配置设置
		rightMenu.setOption(rightOption);//类型
	}
	//获取数据
	function getMapData(limit){
		$.buslongAjax({
			url : $.operaData.monitorypoint.url,
			data : $.operaData.monitorypoint.param,
			dataType:'JSON',
			success:function(objdata){
				var label = [];
				var allData = []
				if(objdata){
					$.each(objdata,function(i,p){
　　　　　　　　　　　　　　　　　　　　　　　　console.log(objdata);//可打印获取的数据
			        	label = i ;//
			        	allData ={'name':i,'value':p};//设置键值对形式
　　　　　　　　　　　　　　　　　　　　　　　　//以下是做的一个判断，两个空间放置不同的数据，因后台数据传过来的是一整套，就自己判断来显示数据了。
			        	leftPie = $("#left_menu");
			        	rightPie = $("#right_menu");
			        	if(rightPie){	//如果按照类型
			        		if(allData.name == "applicationnum" || allData.name == "platformnum"){
				        		if(allData.name == "applicationnum" ){
				        			allData.name = "平台类";
				        		}if(allData.name == "platformnum"){
				        			allData.name = "应用类";
				        		}
				        		var oneData = {};
								var oneData = {name:allData.name,value:allData.value};
								data.push(oneData);//将数据填到data里面
				        	}
			        	}
			        	if(leftPie){	//如果按照部门
			        		if(allData.name == "itzhicheng" || allData.name == "jingfen" || allData.name == "xitong" || allData.name == "yewuyunying"){
				        		if(allData.name == "itzhicheng" ){
				        			allData.name = "IT支撑中心";
				        		}if(allData.name == "jingfen"){
				        			allData.name = "经分支撑中心";
				        		}if(allData.name == "xitong" ){
				        			allData.name = "系统维护中心";
				        		}if(allData.name == "yewuyunying"){
				        			allData.name = "业务运营中心";
				        		}
				        		var oneData = {};
								var oneData = {name:allData.name,value:allData.value};
								data2.push(oneData);//将数据添到另一个空间的data2里面
				        	}
			        	}
			        });
				}
				//option.series[0].data=data;
				setOption(data);//执行setOption函数。传参，将数据传到配置信息内
			}
		});
	}
	getMapData(2);
})

　　

好了，到了此处数据也获取下来了，也显示到页面中了，最终效果为：

虽然有点丑，哈哈，但是后边再调节吧，第一次做这种图表，还挺有意思的，图表还有另外一个插件，Highcharts,这个也挺有意思，有时间可以去学习玩玩。

整的来说，就是引入插件，写入HTML以及样式，配置图表信息（网上有很多解析），获取数据并且加以显示。哦啦

大神们有更好的方法，求推荐呀~~~！