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