本文主要是介绍前端-如何用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个距离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', // 背景色这篇关于前端-如何用echarts绘制含有多个分层的波形图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
