Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

<テンプレート>
    <div>
        <div class="content">
            <div class="neirong">
                <!--凡例-->
                <div class="凡例">
                    <canvas ref="凡例"></canvas>
                </div>
                <!--ウォーターフォール チャート-->
                <div class="waterFall" ref="waterFallContent"
                     @mousemove="waterFallMove($event)"
                     @mouseleave="waterFallLeave"
                >
                    <canvas ref="滝"></canvas>
                    <!--マウスをポップアップ ボックス内に移動します-->
                    <div ref="tip" class="tip"></div>
                </div>
            </div>
        </div>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        名前: "インデックス",
        データ（） {
            戻る {
                カラーマップ: [],
                凡例: null、
                ウォーターフォール: null、
                滝リスト: [],
                滝インデックス: 0,
                waterFallCopyList: [],
                降水間隔: null、
                滝幅: 0,
                滝の高さ: 0,
                最大数: 10,
                最小数: 0
            }
        },

マウント() {
            dx = thisとする
            dx.setColormap()
            dx.createLegendCanvas()
            dx.queryChartList()
        },
        破壊された() {
            dx = thisとする
            クリア間隔(dx.waterFallIntervals)
        },

setColormap() {
      dx = thisとする
      colormap = require('colormap') とします。
      dx.colormap = カラーマップ({
          カラーマップ: 'ジェット',
          シェード数: 150,
          フォーマット: 'rba',
          アルファ: 1,
   })
},

凡例キャンバスを作成します（）{
                dx = thisとする
                legendRefs = dx.$refs.legend とします。
                dx.legend = legendRefs.getContext('2d')
                legendCanvas = document.createElement('canvas') とします。
                凡例キャンバスの幅 = 1
                legendCanvasTemporary = legendCanvas.getContext('2d') とします。
                const imageData = legendCanvasTemporary.createImageData(1, dx.colormap.length)
                (i = 0 とします; i < dx.colormap.length; i++) {
                    定数カラー = dx.カラーマップ[i]
                    imageData.data[imageData.data.length - i * 4 + 0] = color[0]
                    imageData.data[imageData.data.length - i * 4 + 1] = color[1]
                    imageData.data[imageData.data.length - i * 4 + 2] = color[2]
                    imageData.data[imageData.data.length - i * 4 + 3] = 255
                }
                legendCanvasTemporary.putImageData(imageData, 0, 0)
                dx.legend.drawImage(legendCanvasTemporary.canvas, 
                0、0、1、dx.colormap.length、50、0、200、dx.legend.canvas.height)
            },

 ウォーターフォールキャンバスを作成します（）{
                dx = thisとする
                waterFall = dx.$refs.waterFall とします
                dx.waterFall = waterFall.getContext('2d')
                滝の幅 = dx.滝の幅
                waterFall.height = dx.$refs.waterFallContent.offsetHeight
            },

 rowToImageData(データ) {
                dx = thisとする
                dx.$refs.waterFallContent が未定義の場合 {
                    canvasHeight = Math.floor(dx.$refs.waterFallContent.offsetHeight / dx.waterFallHeight) とします。
                    imgOld = dx.waterFall.getImageData(0, 0, dx.waterFallWidth, canvasHeight * dx.waterFallIndex + 1) とします。
                    const imageData = dx.waterFall.createImageData(data.length, 1)
                    (i = 0、i < imageData.data.length、i += 4 とします) {
                        定数 cindex = dx.colorMapData(データ[i / 4], 0, 130)
                        定数 color = dx.colormap[cindex]
                        imageData.data[i + 0] = 色[0]
                        imageData.data[i + 1] = 色[1]
                        imageData.data[i + 2] = 色[2]
                        画像データ.data[i + 3] = 255
                    }
                    (i = 0; i < canvasHeight; i++ とします) {
                        dx.waterFall.putImageData(イメージデータ, 0, i)
                    }
                    dx.waterFall.putImageData(imgOld, 0, キャンバスの高さ)
                }
            },

colorMapData(データ、outMin、outMax) {
                dx = thisとする
                データ <= dx.minNum の場合 {
                    戻り値 outMin
                } そうでない場合 (データ >= dx.maxNum) {
                    戻り値 outMax
                }
                Math.round(((data - dx.minNum) / (dx.maxNum - dx.minNum)) * outMax) を返します。
            },

            waterFallMove(イベント) {
                dx = thisとする
                dataWidth = (dx.$refs.waterFallContent.offsetWidth / dx.waterFallWidth).toFixed(2) とします。
                dataHeight = (dx.$refs.waterFallContent.offsetHeight / dx.waterFallHeight).toFixed(2) とします。
                x = Math.floor(event.offsetX / dataWidth) とします。
                y = Math.floor(event.offsetY / dataHeight) とします。
                試す {
                    dx.$refs.tip.innerHTML = '値:' + JSON.parse(JSON.stringify(dx.waterFallCopyList[y][x]))
                    xx = イベント.オフセットX + 5 とします。
                    yy = event.offsetY - 20 とします。
                    イベントオフセットX > 1300の場合{
                        xx = イベント.オフセットX - 160
                        yy = イベント.オフセットY - 20
                    }
                    dx.$refs.tip.style.position = '絶対'
                    dx.$refs.tip.style.left = xx + 'px'
                    dx.$refs.tip.style.top = yy + 'px'
                    dx.$refs.tip.style.display = 'ブロック'
                } キャッチ (e) {
                    dx.$refs.tip.style.display = 'なし'
                }
            },

ウォーターフォールリーブ() {
                dx = thisとする
                dx.$refs.tip.style.display = 'なし'
            },

クエリチャートリスト() {
                dx = thisとする
                dx.waterFallWidth = 1500
                dx.waterFallHeight = 30
                データ = []
                (i = 0; i < 1500; i++) の場合 {
                    data.push(Math.floor(Math.random() * (20 - 1)) + 1)
                }
                dx.waterFall === nullの場合{
                    dx.createWaterFallCanvas(データの長さ)
                }
                dx.rowToImageData(データ)
                dx.waterFallCopyList.unshift(データ)
                dx.waterFallIndex++
                dx.waterFallIndex > dx.waterFallHeight の場合 {
                    dx.waterFallCopyList.pop()
                }
                dx.waterFallIntervals = setTimeout(() => {
                    dx.queryChartList()
                }, 1000)
            },

.neirong {
        幅: 1800ピクセル;
        高さ: 100%;
        マージン: 80px 自動;
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
    }

    。伝説 {
        幅: 25px;
        高さ: 500px;
    }

    キャンバス {
        幅: 100%;
        高さ: 100%;
    }

    .滝 {
        幅: 1500ピクセル;
        高さ: 500px;
        位置: 相対的;
    }

    。ヒント {
        ポインタイベント: なし;
        表示: なし;
        背景色: #0404049e;
        境界線の半径: 10px;
        色: #fff;
        パディング: 10px;
        ボックスのサイズ: 境界線ボックス;
    }