Vue + Canvas realisiert den Effekt der Aktualisierung des Wasserfalldiagramms von oben nach unten in Echtzeit (ähnlich wie QT).

<Vorlage>
    <div>
        <div Klasse="Inhalt">
            <div Klasse="neirong">
                <!--Legende-->
                <div Klasse="Legende">
                    <canvas ref="legend"></canvas>
                </div>
                <!--Wasserfalldiagramm-->
                <div Klasse="Wasserfall" ref="Wasserfall-Inhalt"
                     @mousemove="WasserFallBewegung($event)"
                     @mouseleave="WasserFallLeave"
                >
                    <canvas ref="Wasserfall"></canvas>
                    <!--Bewegen Sie die Maus in das Popup-Fenster-->
                    <div ref="Tipp" class="Tipp"></div>
                </div>
            </div>
        </div>
    </div>
</Vorlage>

<Skript>
    Standard exportieren {
        Name: "Index",
        Daten() {
            zurückkehren {
                Farbkarte: [],
                Legende: null,
                Wasserfall: null,
                WasserfallListe: [],
                WasserfallIndex: 0,
                WasserfallKopyliste: [],
                WasserfallIntervalle: null,
                Wasserfallbreite: 0,
                Wasserfallhöhe: 0,
                maxNum: 10,
                minNum: 0
            }
        },

montiert() {
            sei dx = dies
            dx.setColormap()
            dx.createLegendCanvas()
            dx.queryChartList()
        },
        zerstört() {
            sei dx = dies
            Intervall löschen(dx.WasserfallIntervalle)
        },

setzeFarbkarte() {
      sei dx = dies
      lass Farbkarte = erfordern('Farbkarte')
      dx.colormap = Farbkarte({
          Farbkarte: 'Jet',
          Anzahl der Farbtöne: 150,
          Format: 'rba',
          Alpha: 1,
   })
},

erstelleLegendCanvas() {
                sei dx = dies
                let legendRefs = dx.$refs.legend
                dx.legend = legendRefs.getContext('2d')
                let legendCanvas = document.createElement('canvas')
                legendCanvas.width = 1
                let legendCanvasTemporary = legendCanvas.getContext('2d')
                const imageData = legendCanvasTemporary.createImageData(1, dx.colormap.length)
                für (lass i = 0; i < dx.colormap.length; i++) {
                    const Farbe = dx.colormap[i]
                    imageData.data[imageData.data.length - i * 4 + 0] = Farbe[0]
                    imageData.data[imageData.data.length - i * 4 + 1] = Farbe[1]
                    imageData.data[imageData.data.length - i * 4 + 2] = Farbe[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.Länge, 50, 0, 200, dx.legend.canvas.Höhe)
            },

 erstelleWasserfallLeinwand() {
                sei dx = dies
                lass Wasserfall = dx.$refs.waterFall
                dx.waterFall = waterFall.getContext('2d')
                Wasserfall.Breite = dx.WasserfallBreite
                Wasserfall.Höhe = dx.$refs.waterFallContent.offsetHeight
            },

 rowToImageData(Daten) {
                sei dx = dies
                wenn (dx.$refs.waterFallContent !== undefiniert) {
                    lass canvasHeight = Math.floor(dx.$refs.waterFallContent.offsetHeight / dx.waterFallHeight)
                    let imgOld = dx.waterFall.getImageData(0, 0, dx.waterFallWidth, canvasHeight * dx.waterFallIndex + 1)
                    const imageData = dx.waterFall.createImageData(data.length, 1)
                    für (sei i = 0; i < imageData.data.length; i += 4) {
                        const cindex = dx.colorMapData(Daten[i / 4], 0, 130)
                        const Farbe = dx.colormap[cindex]
                        Bilddaten.Daten[i + 0] = Farbe[0]
                        Bilddaten.Daten[i + 1] = Farbe[1]
                        Bilddaten.Daten[i + 2] = Farbe[2]
                        Bilddaten.Daten[i + 3] = 255
                    }
                    für (lass i = 0; i < Leinwandhöhe; i++) {
                        dx.waterFall.putImageData(Bilddaten, 0, i)
                    }
                    dx.waterFall.putImageData(altesBild, 0, Leinwandhöhe)
                }
            },

colorMapData(Daten, OutMin, OutMax) {
                sei dx = dies
                wenn (Daten <= dx.minNum) {
                    Rückkehr outMin
                } sonst wenn (Daten >= dx.maxNum) {
                    RückgabewertMax
                }
                returniere Math.round(((Daten - dx.minNum) / (dx.maxNum - dx.minNum)) * outMax)
            },

            WasserfallBewegung(Ereignis) {
                sei dx = dies
                let dataWidth = (dx.$refs.waterFallContent.offsetWidth / dx.waterFallWidth).toFixed(2)
                let dataHeight = (dx.$refs.waterFallContent.offsetHeight / dx.waterFallHeight).toFixed(2)
                let x = Math.floor(event.offsetX / dataWidth)
                lass y = Math.floor(event.offsetY / dataHeight)
                versuchen {
                    dx.$refs.tip.innerHTML = 'Wert:' + JSON.parse(JSON.stringify(dx.waterFallCopyList[y][x]))
                    sei xx = event.offsetX + 5
                    sei yy = event.offsetY - 20
                    wenn (Ereignis.OffsetX > 1300) {
                        xx = Ereignis.OffsetX - 160
                        yy = Ereignis.OffsetY - 20
                    }
                    dx.$refs.tip.style.position = "absolut"
                    dx.$refs.tip.style.left = xx + 'px'
                    dx.$refs.tip.style.top = yy + 'px'
                    dx.$refs.tip.style.display = "Block"
                } fangen (e) {
                    dx.$refs.tip.style.display = "keine"
                }
            },

WasserfallHinterlassen() {
                sei dx = dies
                dx.$refs.tip.style.display = "keine"
            },

queryChartList() {
                sei dx = dies
                dx.waterFallWidth = 1500
                dx.waterFallHeight = 30
                lass Daten = []
                für (sei i = 0; i < 1500; i++) {
                    Daten.push(Math.floor(Math.random() * (20 - 1)) + 1)
                }
                wenn (dx.waterFall === null) {
                    dx.createWaterFallCanvas(Daten.Länge)
                }
                dx.rowToImageData(Daten)
                dx.waterFallCopyList.unshift(Daten)
                dx.waterFallIndex++
                wenn (dx.waterFallIndex > dx.waterFallHeight) {
                    dx.waterFallCopyList.pop()
                }
                dx.waterFallIntervals = setTimeout(() => {
                    dx.queryChartList()
                }, 1000)
            },

.neirong {
        Breite: 1800px;
        Höhe: 100%;
        Rand: 80px automatisch;
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
    }

    .legende {
        Breite: 25px;
        Höhe: 500px;
    }

    Leinwand {
        Breite: 100 %;
        Höhe: 100%;
    }

    .Wasserfall {
        Breite: 1500px;
        Höhe: 500px;
        Position: relativ;
    }

    .Tipp {
        Zeigerereignisse: keine;
        Anzeige: keine;
        Hintergrundfarbe: #0404049e;
        Rahmenradius: 10px;
        Farbe: #fff;
        Polsterung: 10px;
        Box-Größe: Rahmenbox;
    }