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

一、效果图展示

先展示一下实际的效果图

前端-如何用echarts绘制含有多个分层的波形图_第1张图片

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

你可能感兴趣的:(前端,echarts,javascript)