vue+canvas實現數據實時從上到下刷新瀑佈圖效果(類似QT的)
話不多說瞭，先上一張Demo圖，實現的功能有：左側圖例、右側瀑佈圖、鼠標移入彈出當前坐標對應的數據信息（有優化的空間，大傢自由發揮）。
圖例使用到的插件
這裡推薦使用安裝npm插件colormap
瀑佈圖主體內容
這裡不多做解釋瞭，都是一些原生標簽還有vue綁定的事件，可以根據實際項目情況自己封裝成組件，我這裡是寫在一起的。
<template>
<div>
<div class="content">
<div class="neirong">
<!--圖例-->
<div class="legend">
<canvas ref="legend"></canvas>
</div>
<!--瀑佈圖-->
<div class="waterFall" 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 = this
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)
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 = this
let waterFall = dx.$refs.waterFall
dx.waterFall = waterFall.getContext('2d')
waterFall.width = dx.waterFallWidth
waterFall.height = dx.$refs.waterFallContent.offsetHeight
},
繪制單行圖像
rowToImageData(data) {
let dx = this
if (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 = this
if (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 = this
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)
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 - 160
yy = 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 = this
dx.$refs.tip.style.display = 'none'
},
瀑佈圖假數據模擬
queryChartList() {
let dx = this
dx.waterFallWidth = 1500
dx.waterFallHeight = 30
let 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實時刷新瀑佈圖 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- None Found