一、效果图展示

先展示一下实际的效果图

用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个grid，也就是几行波形。

二、绘制逻辑

拿到所选的参数数据之后

1.首先是给横坐标轴的里程-数据注入

2.修改tooltip（跟着竖线走的卡片弹窗）里面的弹出窗的显示，需要返回html模板字符串

3.修改datazoom（最底下的蓝色滑动窗），里面初始的起点和终点

4.按照参数的个数添加grid（每一行的波形），需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200

5.按照参数的个数添加xAxis里面的对象   （需要修改 gridIndex 0 1 2 ...）

只有第一个对象，要显示X轴坐标，且同时要判断X轴坐标是否包含车站

第二个对象开始不显示xAxis坐标轴

6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）

7.最后修改series 每个参数是一个对象的配置（包括数据，线条的类型，颜色）

（值得注意的是，这套绘制，建议放置在一个函数里，然后加载时调用，重新绘制时调用，需要注意重新绘制时，除了要myChart.dispose(); //销毁，还要重新配置option）

三、关键代码

绘制逻辑代码：

<code>const self = this;

//重新给图标赋值数据

this.tableData.forEach(function (currentValue, index, array) {

// 4.按照参数的个数添加grid，需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200

let height = (index+1)*100;

if(index===array.length-1){

self.option.grid.push({

show:true,

left: 50,

right: 50,

bottom: height,

height: 100, //每一个折现图的高度

backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色

})

}else{

self.option.grid.push({

show:true,

left: 50,

right: 50,

bottom: height,

height: 100, //每一个折现图的高度

backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色

})

}

// 5.按照参数的个数添加xAxis里面的对象 （需要修改 gridIndex 0 1 2 ...）

// !!!只有第一个对象，要显示X轴坐标，且同时要判断X轴坐标是否包含车站

// 第二个对象开始不显示坐标轴

if(index==0){

self.option.xAxis.push({

gridIndex: 0, //x 轴所在的 grid 的索引

type: 'category', //类目轴

boundaryGap: false, //坐标轴两边留白策略，

axisLine: {

//是否显示坐标轴轴线。

onZero: false,

lineStyle: {

color: 'black',

width: 2,

},

},

//车站标注

axisLabel: {

// interval: 0,//自适应X轴间距

formatter: function (params) {

// 自定义div

// console.log(typeof(params))

let res;

if (params.includes('站')) {

res = '{abg11|' + params + '}';

} else {

res = '{abg1|' + params + '}';

}

return res;

},

rich: {

abg11: {

backgroundColor: '#2B8AFD',

width: '100%',

align: 'right',

height: 22,

borderRadius: 3,

padding: [2, 4, 2, 4],

color: '#ffffff',

},

abg1: {

color: '#595959',

},

},

},

data: xData,

show: true, //是否显示 x 轴。

})

}else{

self.option.xAxis.push({

gridIndex: index, //x 轴所在的 grid 的索引

type: 'category', //类目轴

boundaryGap: false, //坐标轴两边留白策略，

axisLine: {

onZero: true, //X 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。

lineStyle: {

color: '#979797',

},

},

data: xData,

show: true, //是否显示 x 轴。

axisTick: {

//坐标轴刻度相关设置

show: false,

},

axisLabel: {

//刻度标签

show: false,

},

})

}

// 6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）

self.option.yAxis.push({

gridIndex: index, //y 轴所在的 grid 的索引

type: 'value',

// name: "PM2.5",//纵坐标名字

// nameLocation: "middle",//纵坐标名字的位置

// nameGap: 30,//纵坐标名字与轴线之间的距离

position: 'left', //y轴的位置

inverse: false,

splitLine: {

//坐标轴在 grid 区域中的分割线

show: false,

},

axisLine: {

//坐标轴轴线相关设置 竖着那一根

show: true,

lineStyle: {

color: '#979797',

},

},

axisTick: {

//坐标轴刻度相关设置

show: false,

},

axisLabel: {

//刻度标签

show: false,

},

},)

// 7.最后修改series 每个参数是一个对象

self.option.series.push({

//参数的名字-数据注入

name: currentValue.name,

type: 'line',

color: self.colorArray[index],

// 设置不显示小圆圈

symbol: 'none',

showSymbol: false,

xAxisIndex: index, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。

yAxisIndex: index, //使用的 y 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。

symbolSize: 8, //标记的大小

// hoverAnimation: false,

smooth: true, //平滑曲线

//每个grid的数据-数据注入

data: currentValue.data,

markLine: {

symbol: 'none', //去掉箭头

//最大值和最小值

data: [

{

// type: 'median', //中位数。

type: 'average', //中位数。

symbol: 'none', //去掉开始的原点

label: {

//字体设置

show: 'true',

position: 'insideEndTop',

distance: 10,

formatter: currentValue.name,

color: 'inherit',

},

lineStyle: {

//横线设置

width: 1,

},

},

],

},

lineStyle: {

shadowColor: self.colorArray[index], //透明的颜色

shadowOffsetX: 0,

shadowOffsetY: 0,

opacity: 0.8, //透明度

shadowBlur: 8, //阴影大小

type: "solid", //实线

width: 2,

},

})

});

this.getHeight(this.tableData.length)//重新获得动态的图表高度

//折线图

this.$nextTick(()=>{

this.getChart();//实际绘制

})

动态高度函数代码：

//获得动态高度

getHeight(num){

this.dynamicHeight = `${num * 100 + 150}px`;

},

绘制代码：

//绘制折线图

getChart() {

const chartDom = document.getElementById('main-echarts');

if (myChart != null && myChart != '' && myChart != undefined) {

console.log("销毁了");

myChart.dispose(); //销毁

}

// // 显示加载图

// myChart.showLoading();

this.$nextTick(()=>{

myChart = echarts.init(chartDom);

myChart.setOption(this.option, true);//这里设置true,会每次根据数据重新绘制，设置为false之后，每次新的绘制会在原有图表的基础上再添加（不会有断裂感，会形成流动感）

})

window.addEventListener('resize', function () {

myChart.resize();

});

}

 Y轴名字显示且竖直放置：

// 6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）

self.option.yAxis.push({

gridIndex: index, //y 轴所在的 grid 的索引

type: 'value',

name: currentValue.name.toString().split("").join("\n"),//纵坐标名字竖直从上到下排列

nameRotate:0,

nameTextStyle: {

padding: 10, // 设置与坐标轴的距离，单位为像素

color: 'black', // 这里设置颜色

},

nameLocation: "middle",//纵坐标名字的位置

nameGap: 40,//纵坐标名字与轴线之间的距离

position: 'left', //y轴的位置

inverse: false,

splitLine: {

//坐标轴在 grid 区域中的分割线

show: false,

},

axisLine: {

//坐标轴轴线相关设置 竖着那一根

show: true,

lineStyle: {

color: '#979797',

},

},

axisTick: {

//坐标轴刻度相关设置

show: false,

},

axisLabel: {

//刻度标签

show: true,

showMinLabel: false, // 隐藏最小值标签

showMaxLabel: false, // 隐藏最大值标签

},

},)

弹窗显示为半透明

this.option = {

//鼠标放上去显示的弹窗

tooltip: {

trigger: 'axis', //坐标系出触发

backgroundColor: 'rgba(255, 255, 255, 0.7)', // 设置白色的半透明背景