前端-如何用echarts绘制含有多个分层的波形图

一、效果图展示

先展示一下实际的效果图

用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个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个距离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',  // 背景色
              })
            }