项目使用插件---echarts

项目中用到了echarts的插件，其官网已经很好了，但是自己用到的比较具体，记录一下。

项目最终效果如下：

一、首先贴一下代码

引用echartsjs

<script type="text/javascript" src="${pageContext.request.contextPath}/eim/assets/echarts/echarts.min.js" ></script>

为了美观引用一下主题js，主题可以直接重官网下载，也可再官网配置

<script type="text/javascript" src="${pageContext.request.contextPath}/eim/assets/echarts/macarons.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/eim/assets/echarts/macarons-blue.js" ></script>

<div id="mainchart" style="width: 100%;height:360px;"></div>
<div id="active" style="width: 100%;height:415px;"></div>

<script>
	$(function(){
		//倒计时
		refreshOnTime();
		  //10秒请求一次
		setInterval('refreshOnTime()', 10000);
	}); 
		

		// 基于准备好的dom，初始化echarts实例
		var resourceChart = echarts.init(document.getElementById('mainchart'),
				'macarons');
		var activeChart = echarts.init(document.getElementById('active'),
				'macarons');
		// 指定图表的配置项和数据
		resourceChart.setOption({
			baseOption : {
				title : {
					text : '用户在线率/资源占用率',
					textStyle : {
						color : '#333',
						fontStyle : 'normal',
						fontWeight : "600",
						fontFamily : "microsoft yahei",
						fontSize : 16
					}
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : { // 坐标轴指示器，坐标轴触发有效
						type : 'line' // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter : function(params, ticket, callback) {
						var res = params[0].name;
						res += '<br/>' + params[0].seriesName + ' : '
								+ params[0].value + '%';
						if (params[1] != '') {
							res += '<br/>' + params[1].seriesName + ' : '
									+ params[1].value + '%';
						}
						if (params[2] != '') {
							res += '<br/>' + params[2].seriesName + ' : '
									+ params[2].value + '%';
						}
						setTimeout(function() {
							callback(ticket, res);
						}, 1)
						return res;
					}
				},
				legend : {
					x : 'right',
					data : [ '用户在线率', '磁盘', '内存' ]
				},
				grid : {
					x : '55px',
					y : '50px',
					width : '95%'
				},
				xAxis : [ {
					type : 'category',
					boundaryGap : false,
					data : []
				} ],
				yAxis : [ {
					type : 'value',
					axisLabel : {
						formatter : '{value} %'
					}
				} ],
				series : [ {
					name : '用户在线率',
					type : 'line',
					data : []
				}, {
					name : '磁盘',
					type : 'line',
					data : []
				}, {
					name : '内存