前端用echarts繪制含有多個分層的波形圖關(guān)鍵代碼

更新時間：2024年03月16日 14:10:24 作者：大嘴史努比

每次實現(xiàn)各種圖表時,總會用到echarts,不得不說確實是一個非常好用的開源庫,這篇文章主要給大家介紹了關(guān)于前端用echarts繪制含有多個分層的波形圖的相關(guān)資料,需要的朋友可以參考下

一、效果圖展示

先展示一下實際的效果圖

用戶選擇完需要的波形參數(shù)字段之后，頁面開始渲染圖表，有幾個參數(shù)就要渲染幾個grid，也就是幾行波形。

二、繪制邏輯

拿到所選的參數(shù)數(shù)據(jù)之后

1.首先是給橫坐標(biāo)軸的里程-數(shù)據(jù)注入

2.修改tooltip（跟著豎線走的卡片彈窗）里面的彈出窗的顯示，需要返回html模板字符串

3.修改datazoom（最底下的藍(lán)色滑動窗），里面初始的起點和終點

4.按照參數(shù)的個數(shù)添加grid（每一行的波形），需要疊加計算的是，距離bottom的高度，一個距離100，2個距離200

5.按照參數(shù)的個數(shù)添加xAxis里面的對象（需要修改 gridIndex 0 1 2 ...）
只有第一個對象，要顯示X軸坐標(biāo)，且同時要判斷X軸坐標(biāo)是否包含車站
第二個對象開始不顯示xAxis坐標(biāo)軸

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

7.最后修改series 每個參數(shù)是一個對象的配置（包括數(shù)據(jù)，線條的類型，顏色）

（值得注意的是，這套繪制，建議放置在一個函數(shù)里，然后加載時調(diào)用，重新繪制時調(diào)用，需要注意重新繪制時，除了要myChart.dispose(); //銷毀，還要重新配置option）

三、關(guān)鍵代碼

繪制邏輯代碼：

const self = this;
          
          //重新給圖標(biāo)賦值數(shù)據(jù)
          this.tableData.forEach(function (currentValue, index, array) {
          
            // 4.按照參數(shù)的個數(shù)添加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, //每一個折現(xiàn)圖的高度
                backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white',  // 背景色
              })
            }else{
              self.option.grid.push({
                show:true, 
                left: 50,
                right: 50,
                bottom: height,
                height: 100, //每一個折現(xiàn)圖的高度
                backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white',  // 背景色
              })
            }
            
            // 5.按照參數(shù)的個數(shù)添加xAxis里面的對象   （需要修改 gridIndex 0 1 2 ...）
            // !!!只有第一個對象，要顯示X軸坐標(biāo)，且同時要判斷X軸坐標(biāo)是否包含車站
            // 第二個對象開始不顯示坐標(biāo)軸
            if(index==0){
              self.option.xAxis.push({
                  gridIndex: 0, //x 軸所在的 grid 的索引
                  type: 'category', //類目軸
                  boundaryGap: false, //坐標(biāo)軸兩邊留白策略，
                  axisLine: {
                    //是否顯示坐標(biāo)軸軸線。
                    onZero: false,
                    lineStyle: {
                      color: 'black',
                      width: 2,
                    },
                  },
                  //車站標(biāo)注
                  axisLabel: {
                    // interval: 0,//自適應(yīng)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, //坐標(biāo)軸兩邊留白策略，
                  axisLine: {
                    onZero: true, //X 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數(shù)值軸且包含 0 刻度時有效。
                    lineStyle: {
                      color: '#979797',
                    },
                  },
                  data: xData,
                  show: true, //是否顯示 x 軸。
                  axisTick: {
                    //坐標(biāo)軸刻度相關(guān)設(shè)置
                    show: false,
                  },
                  axisLabel: {
                    //刻度標(biāo)簽
                    show: false,
                  },
                })
            }

            // 6.修改y軸 （可顯示刻度）（需要修改 gridIndex 0 1 2 ...）
            self.option.yAxis.push({
                  gridIndex: index, //y 軸所在的 grid 的索引
                  type: 'value',
                  // name: "PM2.5",//縱坐標(biāo)名字
                  // nameLocation: "middle",//縱坐標(biāo)名字的位置
                  // nameGap: 30,//縱坐標(biāo)名字與軸線之間的距離
                  position: 'left', //y軸的位置
                  inverse: false,
                  splitLine: {
                    //坐標(biāo)軸在 grid 區(qū)域中的分割線
                    show: false,
                  },
                  axisLine: { 
                    //坐標(biāo)軸軸線相關(guān)設(shè)置  豎著那一根
                    show: true,
                    lineStyle: {
                      color: '#979797',
                    },
                  },
                  axisTick: {
                    //坐標(biāo)軸刻度相關(guān)設(shè)置
                    show: false,
                  },
                  axisLabel: {
                    //刻度標(biāo)簽
                    show: false,
                  },
                },)
            
            // 7.最后修改series 每個參數(shù)是一個對象
            self.option.series.push({
                  //參數(shù)的名字-數(shù)據(jù)注入
                  name: currentValue.name,
                  type: 'line',
                  color: self.colorArray[index],
                  // 設(shè)置不顯示小圓圈
                  symbol: 'none',
                  showSymbol: false,
                  xAxisIndex: index, //使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
                  yAxisIndex: index, //使用的 y 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
                  symbolSize: 8, //標(biāo)記的大小
                  //   hoverAnimation: false,
                  smooth: true, //平滑曲線
                  //每個grid的數(shù)據(jù)-數(shù)據(jù)注入
                  data: currentValue.data,
                  markLine: {
                    symbol: 'none', //去掉箭頭
                    //最大值和最小值
                    data: [
                      {
                        // type: 'median', //中位數(shù)。
                        type: 'average', //中位數(shù)。
                        symbol: 'none', //去掉開始的原點
                        label: {
                          //字體設(shè)置
                          show: 'true',
                          position: 'insideEndTop',
                          distance: 10,
                          formatter: currentValue.name,
                          color: 'inherit',
                        },
                        lineStyle: {
                          //橫線設(shè)置
                          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)//重新獲得動態(tài)的圖表高度
          //折線圖
          this.$nextTick(()=>{
            this.getChart();//實際繪制
          })

動態(tài)高度函數(shù)代碼：

//獲得動態(tài)高度
      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);//這里設(shè)置true,會每次根據(jù)數(shù)據(jù)重新繪制，設(shè)置為false之后，每次新的繪制會在原有圖表的基礎(chǔ)上再添加（不會有斷裂感，會形成流動感）
        })

        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"),//縱坐標(biāo)名字豎直從上到下排列
                  nameRotate:0,
                  nameTextStyle: {
                      padding: 10, // 設(shè)置與坐標(biāo)軸的距離，單位為像素
                      color: 'black', // 這里設(shè)置顏色
                  },
                  nameLocation: "middle",//縱坐標(biāo)名字的位置
                  nameGap: 40,//縱坐標(biāo)名字與軸線之間的距離
                  position: 'left', //y軸的位置
                  inverse: false,
                  splitLine: {
                    //坐標(biāo)軸在 grid 區(qū)域中的分割線
                    show: false,
                  },
                  axisLine: { 
                    //坐標(biāo)軸軸線相關(guān)設(shè)置  豎著那一根
                    show: true,
                    lineStyle: {
                      color: '#979797',
                    },
                  },
                  axisTick: {
                    //坐標(biāo)軸刻度相關(guān)設(shè)置
                    show: false,
                  },
                  axisLabel: {
                    //刻度標(biāo)簽
                    show: true,
                    showMinLabel: false, // 隱藏最小值標(biāo)簽
                    showMaxLabel: false, // 隱藏最大值標(biāo)簽
                  },
                },)

彈窗顯示為半透明

 this.option = {
          //鼠標(biāo)放上去顯示的彈窗
          tooltip: {
            trigger: 'axis', //坐標(biāo)系出觸發(fā)
            backgroundColor: 'rgba(255, 255, 255, 0.7)', // 設(shè)置白色的半透明背景