一、效果图展示

先展示一下实际的效果图

用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个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）

三、关键代码

绘制逻辑代码：

const self = this;//重新给图标赋值数据this.tableData.forEach(function (currentValue, index, array) {// 4.按照参数的个数添加grid，需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200let 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);})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)', // 设置白色的半透明背景