我与echart的那些事

    首先，如果你遇到关于echart的一些问题，先可以查看官方样例：http://echarts.baidu.com/echarts2/doc/example.html 。如果其中还有一些不清楚之处，可以查看官方API：

http://echarts.caixin.com/doc/doc.html# 。  感觉这样比你直接去百度问题要靠谱一点。

//echarts对象
var echarts;

//图表类型
var pie1,line1,line2;

//报表样式
var style = "red";
//当前主题色
var curTheme = 'red';

var ecConfig;

$(function() {
	
	require.config({
		paths : {//echart包存放的路径
			echarts : contextPath + "/jslib/echarts-2.2.7/build/source"
		}
	});
    //require中引入你需要用到的图形，如line,bar,radar之类，如果没有引入，到时候使用会报错
	require([ "echarts","echarts/chart/line",
			"echarts/chart/bar", "echarts/chart/radar","echarts/chart/pie"], function(ec) {
			
			echarts = ec;
			require(['echarts/theme/macarons'], function(tarTheme){
				echarts = ec;
				//初始化
				leftInitCharts();
	        });
			
		});
});

 

//一个饼图示例
option.pie1 = {
	 	legend: {
	        x : 'left',
//	        y : 'bottom',
	        data:[],
//	        padding : [2],
	        itemGap : 4,
	        textStyle: {color: '#333',fontSize:12}
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    lableLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: true
            }
        },
//	    color:['#de8645', '#7ed420','#ad34b7','#237ae4'],  
        color:['#7BC0F2','#ad34b7','#de8645','#7ed420','#237ae4'],
	    series : [
	              {
	            	  name:'事项统计',
    		            type:'pie',
    		            radius : '80%',
    		            center: ['50%', '55%'],
    		            itemStyle : {
    		    			normal : {
    		    				label : {
    		    					show : false,
    		    					position : 'inner',
    		    					formatter : function(params) {
    		    						return (params.percent - 0).toFixed(0) + '%';
    		    					}
    		    				},
    		    				labelLine : {
    		    					show : false
    		    				}
    		    			},
    		    			emphasis : {
    		    				label : {
    		    					show : true,
    		    					formatter : "{b}\n{d}%"
    		    				}
    		    			}

    		    		},
			            data:[]	
	              }
	        
	    ]
	};

//折线图示例  -- 部门办结效率
option.line1 = {
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	    	x : 'right',
	        y : 'top',
	        data:['提前','按时','超期'],//,'即办'
	        textStyle: {
	        	color: '#333'
	        } 
		},
	    grid: {//其中(x,y)针对左上角图的位置调整，(x2,y2)针对右下角。
	        y: 20,
	        x2:6,
	        x:30,
	        y2: 20,
	        borderWidth:0
	    },
	    color:['#ad34b7', '#7ed420', '#de8645'],
	    calculable : true,
	    xAxis : [
	        {
	        	axisLabel : {
					show : true,
//					rotate : 25,
		            textStyle: {
		                color: '#333'
		            }},
		            splitLine : {
		                show:false,
		                lineStyle: {
		                    color: '#0B7698',
		                    width: 1
		                }
		            },
	            type : 'category',
	            boundaryGap : false,
	            data : []
	        }
	    ],
	    yAxis : [
	        {
	        	axisLabel : {
					show : true,
		            textStyle: {
		                color: '#333'
		            }},
		            splitLine : {
		                show:false,
		                lineStyle: {
		                    color: '#0B7698',
		                    width: 1
		                }
		            },
	            type : 'value'
	        }
	    ],
	    series : [
	    ]
	};

 

/**
 * 初始化图标对象
 * @returns
 */
function leftInitCharts(){
	leftGet();
}

function leftGet(){
	
	//查找各种事件的统计。
	$.ajax({ 
		url : rootPath + '/jf/ecapp/screen/triplescreen/triplescreenCtr/loadcxglLeftChart',
        type : "POST",
		dataType : 'json',
        success : $.proxy(function(mydata){
        	
        	
        	//类型占比分析
        	if(mydata.pie1result){
        		option.pie1.legend.data = mydata.pie1result.legend;
        		var temp = [];
        		var tempobj ;
        		for (var i =0; i < mydata.pie1result.legend.length; i++){
        			tempobj = {name : mydata.pie1result.legend[i],value : mydata.pie1result['0'+i]};
        			temp.push(tempobj); 
        			$('#sjjcfx1 ul').append('<li>'+mydata.pie1result.legend[i]+'  <label>'+mydata.pie1result['0'+(i+1)]+'</label></li>');
        		}
        		option.pie1.series[0].data = temp;
        	}
        	
        	//部门办结效率
        	if(mydata.line1result){
        		//截取时间长度
        		for(var i=0;i<mydata.line1result.time.length;i++){
        			mydata.line1result.time[i] = mydata.line1result.time[i].substring(4,6);
        		}
        		option.line1.xAxis[0].data = mydata.line1result.time;
        		option.line1.series[0] = {
        				name:'提前',
        	            type:'line',
        	            smooth:true,
        	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
        	            data: mydata.line1result.prerate
        		};
        		option.line1.series[1] = {
        				name:'按时',
        	            type:'line',
        	            smooth:true,
        	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
        	            data: mydata.line1result.normalrate
        		};
        		option.line1.series[2] = {
        				name:'超期',
        	            type:'line',
        	            smooth:true,
        	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
        	            data: mydata.line1result.outrate
        		};
        	}
        	
        	
        	//重置布局
        	leftResetWidgetSize();
			
			//绑定页面缩放事件
			$(window).bind('resize', leftResetWidgetSize);
        },this)
	});
	/*//重置布局
	leftResetWidgetSize();
	
	//绑定页面缩放事件
	$(window).bind('resize', leftResetWidgetSize);*/
}

/**
 * 调整高度
 */
function leftResetWidgetSize(){
	
	leftReflashUI();
}

/**
 * 刷新UI
 */
function leftReflashUI(jsonList){
	if(jsonList!='undefine' && jsonList!=null){
		
	}
	pie1 = echarts.init(document.getElementById("sjjcfx"));
	pie1.setOption(option.pie1);
	
	line1 = echarts.init(document.getElementById("bmbjxl"));
	line1.setOption(option.line1);
	
	
}

 

    然后页面有对应的id区域就可以了，记住，因为ehcart是基于canvas，所以所在的区域要设置宽度和高度，要不然会报错。显然上面只是一个基本流程，对于echart，只要你按照它需要的数据格式把数据传输进去，图像就可以很好展示出来，但是很多时候我们需要对展示的echart进行各种调整包括展示的样式等等，这是你就需要查询API了，虽然这样看起来简单，但是有时候却很费时，下面我将介绍一下一些常用的样式调整等。

    比如你要让有坐标的图如折线图line尽量占满整个区域，此时你可能需要调整grid :{}中x,y,x2,y2的值；

    如果你要去掉坐标图中的那些格子，此时需要将x，y轴的splitLine:{show:false;}  ，如你所见，show设为false，但是这样还会有白色边框，如果也想去的，需要在grid中添加参数：borderWidth:0,这样就没有白色边框了。

转载于:https://my.oschina.net/itazi/blog/752360