Echarts（曲線圖）

寫在前面：

最近項目中用到了Echarts做趨勢圖，博主通過萬能的度娘研究了一下。Echarts字段的使用基本都寫在代碼注釋里了，這是博主的第一篇博客，如果哪里寫的不好望大家見諒，最后希望本篇博客對大家有一些幫助。

1. 下載Echarts.js包

使用Echarts需要先下載Echarts.js包，大家可以從Echarts官網下載，
或者可以從博主提供的網址下載：echarts.min.js
把鏈接中的js代碼全部復制到一個空txt文件，保存之后重命名為echarts.min.js即可。

2. Echarts.js導入程序

就是直接把下載完成的js包粘貼到項目的js文件夾下

3. 將Echarts.js引入使用的網面

<script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script>

4. 下面是曲線圖案例

效果圖：

代碼：

html：

<div class="border-div" id="border-div">
    <div class="Echarts" id="trendChart"></div>
</div>

css：

<style type="text/css">
	#border-div {
		width: 700px;
		height: 430px;
		border: 1px solid #000000;
		margin: 10% auto;
		overflow:visible
	}
	#trendChart {
		width: 700px;
		height: 400px; 
		margin-top: 3%
	}
</style>

js：

<script language="JavaScript" type="text/javascript">
	// 頁面初始化
	window.onload = function(){
		// 獲取異常振動加速度統計數據
		myChart();
	};
	
	//Echarts
	function myChart() {
		var alarmTime = "2020-08-14 14:56:31";
		var option = {
			title: {
				text: '車體振動及轉向架振動',
				// left: 'left',	// 可選為：'left' | 'center' | 'right'
				padding: [0,0,0,20], // 上, 右, 下, 左
				/* textStyle: {
					fontWeight: 'normal',              
					color: 'MidnightBlue'  // 標題顏色
				} */
			},
			/* 提示框組件 */
			tooltip: { 
				trigger: 'axis', // 觸發類型，在餅形圖中為item
				axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
					type : 'line'        // 默認為直線，可選為：'line' | 'shadow'
				},
				formatter: function (params, ticket, callback) { // 用formatter回調函數顯示多項數據內容
					var htmlStr = '';
					for(var i=0;i<params.length;i++){
						var param = params[i];
						var xName = param.name; // x軸的名稱
						var seriesName = param.seriesName; // 圖例名稱
						var value = param.value; // y軸值
						var color = param.color; // 圖例顏色
											
						if(i===0){
							htmlStr += xName + '<br/>';//x軸的名稱
						}
						htmlStr +='<div>';
						//為了保證和原來的效果一樣，這里自己實現了一個點的效果
						htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
											
						// 文本顏色設置--(需要設置,請解注釋下面一行)
						// htmlStr += '<span style="color:'+color+'">';
											
						// 圓點后面顯示的文本
						htmlStr += seriesName + '：' + value  + '&nbsp&nbsp&nbsp' + alarmTime;
											
						// 文本顏色設置--(需要設置,請解注釋下面一行)
						// htmlStr += '</span>';
											
						htmlStr += '</div>';
					}
					return htmlStr;
				}
				
			},
			color: ['HotPink','DeepSkyBlue','LawnGreen','Gold'], // 圖例及線條的顏色
			/* 設置圖例樣式 */
			legend: {
				left: 'right', // 位置
				padding: [3,60,0,0],
				icon: "circle", // 形狀 類型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
				itemWidth: 10,  // 設置寬度
				itemHeight: 10, // 設置高度
				itemGap: 12, // 設置間距
				data: ['車體振動I位   ', '車體振動II位', '轉向架振動I位', '轉向架振動II位'],
				textStyle:{	// 設置圖例字體
					color: '#000000',
					// fontSize: "15"
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			/*下載功能*/
			toolbox: {
				feature: {
					saveAsImage: {}
				},
				padding: [0,15,0,0]
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				/* axisLine: { // 改變x軸顏色 默認不寫為黑色
					lineStyle: {
						color: '#00FFFF',
						width: 1 // 這里是為了突出顯示加上的
					}
				}, */
				data: [ '0s','1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s']
			},
			yAxis: {
				/* axisLine: { // 改變y軸顏色 默認不寫為黑色
					lineStyle: {
						color: '#00FFFF',
						width: 1 // 這里是為了突出顯示加上的
					}
				}, */
				type: 'value'
			},
			series: [
				{
					name: '車體振動I位   ',
					type: 'line',
					// stack: '加速度',
					smooth: true,
					/*lineStyle: {//折線顏色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
					data: ["-1.02", "-0.84", "-2.66", "-1.23", "0.94", "-0.27", "-0.65", "-3.3", "-0.56", "-1.14"]
					// data: data.ctzd1
				},
				{
					name: '車體振動II位',
					type: 'line',
					// stack: '加速度',
					smooth: true,
					/*lineStyle: { // 折線顏色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
					data: ["-2.57", "3.43", "-1.16", "-0.55", "-0.52", "0.6", "0.13", "0.2", "1.38", "0.17"]
					// data: data.ctzd2
				},
				{
					name: '轉向架振動I位',
					type: 'line',
					// stack: '加速度',
					smooth: true,
					/*lineStyle: { // 折線顏色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
					data: ["-0.39", "-1.08", "-0.15", "-0.31", "-1.98", "-0.42", "-0.14", "-1.55", "-0.27", "0.29"]
					// data: data.zxjzd1
				},
				{
					name: '轉向架振動II位',
					type: 'line',
					// stack: '加速度',
					smooth: true,
					/*lineStyle: { // 折線顏色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
					data: ["-0.2", "-0.35", "-0.19", "-0.95", "-0.46", "-0.32", "-0.04", "-0.38", "-0.91", "0"]
					// data: data.zxjzd2
				}
			]
		};
		
		var chart = echarts.init(document.getElementById('trendChart'));
		// 使用剛指定的配置項和數據顯示圖表。
		chart.setOption(option);
	}
</script>

5. 若要傳遞真實數據可以使用ajax來實現前后端數據交互

代碼如下：

引入jquery

發送ajax請求

java后端：

controller

service