Echarts举例

var source=0;
/**
 * 在页面初始化加载时调用饼图方法 getData()
 */
$(document).ready(function() {
	getData();
});

/**
 * 此方法请求是加载绘制图形的数据 参数可选
 */
function getData() {

	/**
	 * 此post请求是加载绘制饼图的数据
	 */
	$.post("/coalTapePrice/getCoalTapePrice.json", {
	}, function(data) {
		var jsonObj = eval(data);
		if (jsonObj == '' ) {
			alert("没有数据,请选择其它选项");
		}

		var year = new Date().getFullYear();
		var startValue = year + "-" + (new Date().getMonth() + 1) + "-01";
		setHistogram(jsonObj, year,startValue);
	}, "json");
}

function setHistogram(jsonObj, year,startValue) {
// 初始容器有大小问题，所以调用这个方法可以解决
	autoHeight();
	var chart = echarts.init(document.getElementById('main'));
	// 调用自适应方法
	var myCharts = [ chart ];
	autoDivSize(myCharts);
	var str='';
	var str2='';
	var coalType2;
	var reCoalType ='';
	var month;
	var price;
	var titleName = '';
	//得到不同煤种名称数据
	for(var i = 0 ; i < jsonObj.length ; i++){
		str2 +="'"+jsonObj[i].coalType+"',";
	}
	//截取str2最后一个逗号之前的数据
	var msg2 = str2.substring(0, str2.lastIndexOf(','));
	coalType2=eval("(["+msg2+"])");
	
	month=eval(jsonObj[0].month);
	if(jsonObj !=''){
		titleName = jsonObj[0].titleName;
		reCoalType = jsonObj[0].coalType;
	}
	
	//拼接不同煤种名称及其价格数据
	for(var i = 0 ; i < jsonObj.length ; i++){
		str +="{name:'" + jsonObj[i].coalType +"', type:'line',data:"+ jsonObj[i].price+"},";
	}
	//截取str最后一个逗号之前的数据
	var msg = str.substring(0, str.lastIndexOf(','));
	price=eval("(["+msg+"])");
	
           var option = {
		title: {
	        text: titleName+'各煤种价格',
	        padding: [5, 10],
	        x: 'center',
	        top: '2%',
	        subtext: year+'年内采数据'
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    toolbox: {
	        show : true,
	        orient: 'vertical',
	        top: '20%',
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore : {show: true},
	            saveAsImage : {show: true},
	            myTool1 : {
					show : true,
					title : '小眼睛             ',
					icon : 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
					onclick : function() {
						toPriceAnalyze();
					}
				},
				myTool2 : {
					show : true,
					title : '放大              ',
					icon : 'image://../../js/img/big.ico',
					onclick : function() {
						option.toolbox.feature.myTool2.show = false;
						option.toolbox.feature.myTool3.show = true;
						chart.setOption(option);
						var iframe = window.frameElement;
						var id = $(iframe).parent().attr('id');
						parent.amplification(id);
					}
				},
				myTool3 : {
					show : false,
					title : '缩小              ',
					icon : 'image://../../js/img/reset.ico',
					onclick : function() {
						option.toolbox.feature.myTool2.show = true;
						option.toolbox.feature.myTool3.show = false;
						chart.setOption(option);
						var iframe = window.frameElement;
						var id = $(iframe).parent().attr('id');
						parent.shrink(id);
					}
				}
	        }
	    },
	    dataZoom : [ {
			startValue : startValue
		}, {
			type : 'inside'
		} ],
	    calculable : true,
	    legend: {
	        //right: '87%' ,
	        //align :	'left',
	        //bottom : '15%',
	        data:coalType2
	    },
	    xAxis : [
	        {
	            type : 'category',
	            data : month
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            name : '价格',
	            axisLabel : {
	                formatter: '{value} 元/吨'
	            }
	        }
	    ],
	    series :price
	};
    // 为echarts对象加载数据 
	chart.setOption(option);
	chart.on('click', queryCoalType);
	function queryCoalType(params) {
	    reCoalType = params.seriesName;
	    invoking(reCoalType);
	}
	invoking(reCoalType);
}