写在前面：

最近项目中用到了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引入使用的网面

4. 下面是曲线图案例

效果图：

代码：

html：

css：

#border-div {

width: 700px;

height: 430px;

border: 1px solid #000000;

margin: 10% auto;

overflow:visible

}

#trendChart {

width: 700px;

height: 400px;

margin-top: 3%

}

js：

// 页面初始化

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

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 + '
';//x轴的名称

}

htmlStr +='

';

}

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);

}

5. 若要传递真实数据可以使用ajax来实现前后端数据交互

代码如下：

引入jquery

发送ajax请求

java后端：

controller

service