一、GIF圖

二、前臺程式碼

// 呼叫方法
hotlineLine();

// 定時重新整理
setInterval(function () {
	hotlineLine();
},5000);

function hotlineLine(){
	// 初始化圖表元素
	var hotlineLine = echarts.init(document.getElementById('hotlineLine_id'));
	$.get('${pageContext.request.getContextPath()}/m/hotline.do', function (res) {
		var option = {
			// 提示框元件，滑鼠經過餅圖時會出現提示框
			tooltip: {
				// 觸發型別
				// 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
				trigger: 'axis'
			},
			// 每條折線的顏色
			color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'],
			// 圖例元件
			legend: {
				// 內容
				data:['呼入', '撥出', '應答', '使用者放棄'],
				// 樣式
				textStyle:{
					   fontSize:10,
					   color:'#66ffff'
				   },
				// 上距離，類似css中的margin
				top:'5%'
			},
			// 網格
			grid: {
				// 左距離
				left: '7%',
				right: '5%',
				bottom: '10%',
				top:'20%'
			},
			// 橫座標
			xAxis: {
				// 型別
				type: 'category',
				// 刻度
				data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
				// 樣式
				axisLine:{
					// 橫座標線的顏色
					lineStyle:{
						color:'#66ffff'
					}
				}
			},
			yAxis: {
				type: 'value',
				name: '次數',
				axisLabel: {
					formatter: '{value}'
				},
				axisLine:{
					lineStyle:{
						color:'#66ffff'
					}
				},
				splitLine:{
					show: true,
					lineStyle:{
						color:'#66ffff'
					}
				}
			},
			series:  [
					  {
						  name:'呼入',
						  type:'line',
						  data:res[3]
					  },
					  {
						  name:'撥出',
						  type:'line',
						  data:res[2]
					  },
					  {
						  name:'應答',
						  type:'line',
						  data:res[1]
					  },
					  {
						  name:'使用者放棄',
						  type:'line',
						  data:res[0]
					  }
				],
				// 文字標籤
				label: {  
					//是否展示  
					show: true,
					position: 'top',
					textStyle: {  
						fontWeight:'bolder',  
						fontSize : '12',  
						fontFamily : '微軟雅黑',  
						color:defaultColor
					}  
				}
		};
		hotlineLine.setOption(option);
	});
}
 

<div class="rightMain01-sub03 box-border">
	<div class="box-title">話務指標趨勢圖</div>
	<div class="rightMain01-sub03-data">
		<div id="hotlineLine_id" style="height:340px;"></div>
	</div>
</div>

三、後臺程式碼

List<List<Integer>> hotlineList = new ArrayList<List<Integer>>();

@RequestMapping("/m/hotline.do")
@ResponseBody
public JSONArray hotline() {
	List<List<Integer>> returnList = new ArrayList<List<Integer>>();
	if (hotlineList.size() == 0 || hotlineList.get(0).size() >= 9) {
		hotlineList.clear();
		for (int i = 0; i < 4; i++) {
			List<Integer> l = new ArrayList<Integer>();
			l.add(i * 5 + AlexUtils.getRandomInteger(0, 5));
			hotlineList.add(l);
		}
	}
	for (int i = 0; i < hotlineList.size(); i++) {
		List<Integer> list = hotlineList.get(i);
		int thisSize = list.size();
		if (thisSize < 5) {
			list.add(list.get(thisSize - 1) + AlexUtils.getRandomInteger(1, 5));
		} else {
			list.add(list.get(thisSize - 1) - AlexUtils.getRandomInteger(1, 5));
		}

		returnList.add(list);
	}
	hotlineList = returnList;
	return JSONArray.fromObject(returnList);
}

public static int getRandomInteger(int min, int max) {
	int diff = max - min;
	return min + new Random().nextInt(diff);
}
 

資料格式：

[[1,3,4,5,7],[6,9,11,12,13],[10,11,12,13,16],[16,19,21,22,24]]