echart图的简单创建及容器大小自适应调整

引用echart.js

<l:script path="sjzc/echarts.js"></l:script>

构建容器

<!-- echart 图表 -->
<div id="echart" ></div>

echart图

$(document).ready(function()
{ 
	//echart图初始化
	var container = document.getElementById('echart');
	//自适应窗口大小
	container.style.width = window.innerWidth*0.95+'px'; 
	container.style.height = window.innerHeight*0.91+'px';
	//异步请求数据
	var urlP = context + "/service/sjzc/sjhydList";  
	urlP =  encodeURI(urlP, "utf-8"); 
	$.ajax({
		url :urlP,	
		type : "get",
		dataType : "text",
		success : function(rtnMap) {
			var jsonObj = eval('('+rtnMap+')');
			var myChart = echarts.init(container);
			var option = myOption(jsonObj.xAxisTn,jsonObj.yAxisPccs,jsonObj.yAxisSjcs);
			myChart.setOption(option); 
		}
	}); 	
} ); 
//option搭建
function myOption(xAxisTn,yAxisPccs,yAxisSjcs){
	option = {
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            
		            type : 'shadow'        
		        }
		    },
		    legend: {
		        data: ['PC端访问','手机端访问']
		    },
		    grid: {
		        left: '8%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    yAxis:  {
		        type: 'value',
		        name: '访问总量(次)'
		    },
		    xAxis: {
		        data: xAxisTn
		    },
		    dataZoom: [
		        {   // 这个dataZoom组件，默认控制x轴。
		            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
		            start: 0,      // 左边在 0% 的位置。
		            end: 30         // 右边在 30% 的位置。
		        }
		    ],
		    series: [
		        {
		            name: 'PC端访问',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'insideRight'
		                }
		            },
		            data: yAxisPccs
		        },
		        {
		            name: '手机端访问',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'insideRight'
		                }
		            },
		            data: yAxisSjcs
		        }
		    ]
		}; 	
	return option;
}