<script>
    		function mainchart(){
	    		// 基於準備好的dom，初始化echarts例項
		        var resourceChart = echarts.init(document.getElementById('mainchart'),'macarons'); //macarons主題
		        var activeChart = echarts.init(document.getElementById('active'),'macarons');
		        // 指定圖表的配置項和資料
	    		option = {
				    title: {
				        text: '使用者線上率/資源佔用率',
				        textStyle:{
		                    color:'#333',
		                    fontStyle:'normal',
		                    fontWeight:"600",
		                    fontFamily:"microsoft yahei",
		                    fontSize:16
		                }
				    },
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 座標軸指示器，座標軸觸發有效
				            type : 'line'        // 預設為直線，可選為：'line' | 'shadow'
				        }
				    },
				    legend: {
				    	x: 'right', 
				        data:['使用者線上率','磁碟','記憶體']
				    },
				    grid: {
				    	x: '40px', 
				    	y: '50px', 
				    	width: '95%'
				    },
				    xAxis: [
				        {
				        	type: 'category',
					        boundaryGap: false,
		 			        data: ['8:10','8:20','8:30','8:40','8:50','9:00','9:10']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series: [
				        {
				            name:'使用者線上率',
				            type:'line',
	 			            data:[50, 59, 67, 53, 72, 65, 70]
				        },
				        {
				            name:'磁碟',
				            type:'line',
	 			            data:[61, 72, 72, 65, 83, 82, 90]
				        },
				        {
				            name:'記憶體',
				            type:'line',
				            data:[55, 67, 62, 75, 93, 72, 80]，
				            markPoint: {
				                data: [
				                    {type: 'max', name: '最大值'},
				                    {type: 'min', name: '最小值'}
				                ]
				            }*/
				        }
				    ]
				};
		        
	    		// 指定圖表的配置項和資料
	    		option2 = {
				    title: {
				        text: '活躍使用者TOP',
				        textStyle:{
		                    color:'#333',
		                    fontStyle:'normal',
		                    fontWeight:"600",
		                    fontFamily:"microsoft yahei",
		                    fontSize:16
		                }
				    },
				     tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 座標軸指示器，座標軸觸發有效
				            type : 'none'        // 預設為直線，可選為：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '8%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : ['李雪','周成龍','張敏','元芳菲','李菲兒','陳潔','張敏','元芳菲','李菲兒','陳潔'],
				            axisTick: {
				                alignWithLabel: true
				            },
				          	//設定字型傾斜  
		                    axisLabel:{ 
		                        rotate:45//傾斜度 -90 至 90 預設為0  
		                       
		                    },
				        }
				    ],
				     yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series: [
				        {
				            name: '2017年',
				            type: 'bar',
				            itemStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#bcd1ff'},
				                            {offset: 1, color: '#3964c1'}
				                        ]
				                    )
				                },
				                emphasis: {
				                    color: new echarts.graphic.LinearGradient(
				                        0, 0, 0, 1,
				                        [
				                            {offset: 0, color: '#bcd1ff'},
				                            {offset: 1, color: '#2851a7'}
				                        ]
				                    )
				                }
				            },
				            data: [100, 300, 152, 121594, 134141, 81807, 31000, 121594, 134141, 81807]
				        }
				    ]
				};
		        
		        
				// 使用剛指定的配置項和資料顯示圖表。
	        	resourceChart.setOption(option);
	        	activeChart.setOption(option2);
	        	/*視窗自適應，關鍵程式碼*/
	        	setTimeout(function (){
	        	    window.onresize = function () {
	        	    	resourceChart.resize();
	        	    	activeChart.resize();
	        	    }
	        	},200)
    		};
    	</script>