話不多說了，先上一張Demo圖，實現(xiàn)的功能有：左側(cè)圖例、右側(cè)瀑布圖、鼠標移入彈出當前坐標對應的數(shù)據(jù)信息（有優(yōu)化的空間，大家自由發(fā)揮）。

圖例使用到的插件

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

瀑布圖主體內(nèi)容

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

<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數(shù)據(jù)

colormap：顏色庫 legend：圖例 waterFall：瀑布圖 waterFallList：瀑布圖源數(shù)據(jù) waterFallIndex：瀑布圖定時器用到的計數(shù)標識 waterFallCopyList：瀑布圖二維數(shù)組（用來顯示數(shù)據(jù)做的臨時儲存） waterFallIntervals：瀑布圖定時器 waterFallWidth：瀑布圖的寬度（后端返回的數(shù)據(jù)length） waterFallHeight：瀑布圖定高度（也可以理解成渲染次數(shù) 例如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 }},

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

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

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

這個地方具體看上面插件的官網(wǎng)有詳細的介紹

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

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) },創(chuàng)建瀑布圖

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)} },返回數(shù)據(jù)對應的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 = ’數(shù)值：’ + 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’ },瀑布圖假數(shù)據(jù)模擬

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實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的)的文章就介紹到這了,更多相關vue+canvas實時刷新瀑布圖 內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！