話不多說了，先上一張Demo圖，實現的功能有：左側圖例、右側瀑布圖、鼠標移入彈出當前坐標對應的數據信息（有優化的空間，大家自由發揮）。

圖例使用到的插件

這里推薦使用安裝npm插件colormap

瀑布圖主體內容

這里不多做解釋了，都是一些原生標簽還有vue綁定的事件，可以根據實際項目情況自己封裝成組件，我這里是寫在一起的。

<template> <div><div class='content'> <div class='neirong'><!--圖例--><div class='legend'> <canvas ref='legend'></canvas></div><!--瀑布圖--><div ref='waterFallContent' @mousemove='waterFallMove($event)' @mouseleave='waterFallLeave'> <canvas ref='waterFall'></canvas> <!--鼠標移入彈出框--> <div ref='tip' class='tip'></div></div> </div></div> </div></template>

這里是用到的Data數據

colormap：顏色庫 legend：圖例 waterFall：瀑布圖 waterFallList：瀑布圖源數據 waterFallIndex：瀑布圖定時器用到的計數標識 waterFallCopyList：瀑布圖二維數組（用來顯示數據做的臨時儲存） waterFallIntervals：瀑布圖定時器 waterFallWidth：瀑布圖的寬度（后端返回的數據length） waterFallHeight：瀑布圖定高度（也可以理解成渲染次數 例如30次渲染完成） maxNum：圖例最大值 minNum：圖例最小值

<script> export default {name: 'index',data() { return {colormap: [],legend: null,waterFall: null,waterFallList: [],waterFallIndex: 0,waterFallCopyList: [],waterFallIntervals: null,waterFallWidth: 0,waterFallHeight: 0,maxNum: 10,minNum: 0 }},

下面是具體的方法，寫的比較粗略，大家湊活看吧，覺得有用的大家拿走，不足之處自由發揮修改

方法調用這就不解釋了，離開頁面銷毀定時器。

mounted() { let dx = this dx.setColormap() dx.createLegendCanvas() dx.queryChartList()},destroyed() { let dx = this clearInterval(dx.waterFallIntervals)},創建顏色庫

這個地方具體看上面插件的官網有詳細的介紹

setColormap() { let dx = this let colormap = require(’colormap’) dx.colormap = colormap({ colormap: ’jet’, nshades: 150, format: ’rba’, alpha: 1, })},創建圖例

createLegendCanvas() {let dx = thislet legendRefs = dx.$refs.legenddx.legend = legendRefs.getContext(’2d’)let legendCanvas = document.createElement(’canvas’)legendCanvas.width = 1let legendCanvasTemporary = legendCanvas.getContext(’2d’)const imageData = legendCanvasTemporary.createImageData(1, dx.colormap.length)for (let i = 0; i < dx.colormap.length; i++) { const color = dx.colormap[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) },創建瀑布圖

createWaterFallCanvas() {let dx = thislet waterFall = dx.$refs.waterFalldx.waterFall = waterFall.getContext(’2d’)waterFall.width = dx.waterFallWidthwaterFall.height = dx.$refs.waterFallContent.offsetHeight },繪制單行圖像

rowToImageData(data) {let dx = thisif (dx.$refs.waterFallContent !== undefined) { let 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) for (let i = 0; i < imageData.data.length; i += 4) {const cindex = dx.colorMapData(data[i / 4], 0, 130)const color = dx.colormap[cindex]imageData.data[i + 0] = color[0]imageData.data[i + 1] = color[1]imageData.data[i + 2] = color[2]imageData.data[i + 3] = 255 } for (let i = 0; i < canvasHeight; i++) {dx.waterFall.putImageData(imageData, 0, i) } dx.waterFall.putImageData(imgOld, 0, canvasHeight)} },返回數據對應的Colormap顏色

colorMapData(data, outMin, outMax) {let dx = thisif (data <= dx.minNum) { return outMin} else if (data >= dx.maxNum) { return outMax}return Math.round(((data - dx.minNum) / (dx.maxNum - dx.minNum)) * outMax) },鼠標移入瀑布圖

waterFallMove(event) {let dx = thislet 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)let y = Math.floor(event.offsetY / dataHeight)try { dx.$refs.tip.innerHTML = ’數值：’ + JSON.parse(JSON.stringify(dx.waterFallCopyList[y][x])) let xx = event.offsetX + 5 let yy = event.offsetY - 20 if (event.offsetX > 1300) {xx = event.offsetX - 160yy = event.offsetY - 20 } dx.$refs.tip.style.position = ’absolute’ dx.$refs.tip.style.left = xx + ’px’ dx.$refs.tip.style.top = yy + ’px’ dx.$refs.tip.style.display = ’block’} catch (e) { dx.$refs.tip.style.display = ’none’} },鼠標移出瀑布圖

waterFallLeave() {let dx = thisdx.$refs.tip.style.display = ’none’ },瀑布圖假數據模擬

queryChartList() {let dx = thisdx.waterFallWidth = 1500dx.waterFallHeight = 30let data = []for (let i = 0; i < 1500; i++) { data.push(Math.floor(Math.random() * (20 - 1)) + 1)}if (dx.waterFall === null) { dx.createWaterFallCanvas(data.length)}dx.rowToImageData(data)dx.waterFallCopyList.unshift(data)dx.waterFallIndex++if (dx.waterFallIndex > dx.waterFallHeight) { dx.waterFallCopyList.pop()}dx.waterFallIntervals = setTimeout(() => { dx.queryChartList()}, 1000) },

樣式代碼

.neirong {width: 1800px;height: 100%;margin: 80px auto;display: flex;justify-content: center; } .legend {width: 25px;height: 500px; } canvas {width: 100%;height: 100%; } .waterFall {width: 1500px;height: 500px;position: relative; } .tip {pointer-events: none;display: none;background-color: #0404049e;border-radius: 10px;color: #fff;padding: 10px;box-sizing: border-box; }

到這里這個Demo基本就是可以運行的，不會有任何報錯，代碼寫的不是很高級，我本人也是個初級的小菜鳥，也是第一次寫文章，希望大佬可以給出一些更好的建議我也會好好學習的，也希望那些遇到類似這個需求沒什么思路的小伙伴可以借鑒我的踩坑之旅，可以更快的成長起來。

到此這篇關于vue+canvas實現數據實時從上到下刷新瀑布圖效果(類似QT的)的文章就介紹到這了,更多相關vue+canvas實時刷新瀑布圖 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！