使用ZRender實現(xiàn)護理單折線圖功能

公司醫(yī)院項目，需要定制化顯示病人的體溫、脈搏、呼吸。由于界面是定義好的，無法使用開源項目來改，干脆自己畫一個了。

為什么是ZRender

ZRender 是百度前端團隊用于繪制 EChar t的開源庫，里面封裝了各種對 Canvas 的使用。而且 ZRender 的文檔是全中文的，對開發(fā)者也非常友好

需求

相對于其他知識點，繪圖沒什么特別要講的。無非是不停的畫而已。步驟復雜但是實現(xiàn)起來沒有什么技術難點。所以直接寫下需求，然后貼上代碼供大家參考啦~

  • 繪制表格 —— 計算好格子的寬、高、數(shù)量，for 循環(huán)繪制多條橫線、豎線即可實現(xiàn)。
  • 根據體溫、脈搏等數(shù)據標注相應位置的點，點有各種形狀。 —— 形狀ZRender 已經提供，直接調用配置即可。
    • 實心圓
    • 空心圓
    • 實心三角形
    • 虛線
    • 特殊符號 —— 其實都不難，慢慢畫都能畫出來。
  • 縱向繪制文本 —— 沒有發(fā)現(xiàn)縱向繪制的方式，于是將文本拆分一個一個字畫上去。
  • 鼠標 hover 在各個點上需要有文本框顯示具體內容。 —— 繪制一個文本，隱藏起來。當觸發(fā) hover 事件的時候顯示文本，并將文本移動到相應位置。
  • 線段連接 —— 計算一下兩個點的x，y連接即可。虛線只需要配置 style: { lineDash: [ 5, 5 ] } 即可實現(xiàn)虛線效果。
  • 將 ZRender 繪制的表格打印出來 —— 轉為圖片打印，最后會講。

貼個效果圖：


效果圖

實現(xiàn)

由于是公司項目，不發(fā)布源碼啦~以下是demo代碼。

table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <script src="zrender.js"></script>
    <style>
        #main {
            height: 600px;
            width: 800px;
        }
    </style>
</head>
<body>
<div id="main"></div>
<img src="" id="main_img">
<script src="DrawUtil.js"></script>
<script>
    var zr = zrender.init(document.getElementById('main'))
    const [height, width] = [15, 15]
    var tableGroup = new zrender.Group()
    for (let i = 0; i <= 30; i++) {
        var line1 = new zrender.Line({
            shape: {
                x1: 0,
                y1: height * i,
                x2: width * 30,
                y2: height * i,
            }
        })
        var line2 = new zrender.Line({
            shape: {
                x1: width * i,
                y1: 0,
                x2: width * i,
                y2: height * 30,
            }
        })
        tableGroup.add(line1)
        tableGroup.add(line2)
    }
    tableGroup.attr('position', [10, 10])
    zr.add(tableGroup)

    DrawUtil.initHoverText(zr)
    zr.add(DrawUtil.drawText('你好，在干嘛吶？', 30, 30))
    zr.add(DrawUtil.drawCircle({x: 50, y: 50, txt: '哈哈'}, '#FAD'))
    zr.add(DrawUtil.drawHollowCircle({x: 100, y: 100, txt: '空心圓'}, '#DAF'))
    zr.add(DrawUtil.drawIsogon({x: 200, y: 200, txt: 'jack'}, '#ADF'))

    setTimeout(toImg, 1000)

    function toImg() {
        console.log('to img')
        var canvas = document.querySelector('#main canvas')
        if (canvas) {
            var img = canvas.toDataURL("image/png")
            document.querySelector('#main_img').src = img
        }
    }
</script>
</body>
</html>

DrawUtil.js

// hover 框文本樣式
var Text

var DrawUtil = {
    // 初始化懸浮文本
    initHoverText(zr){
        Text = new zrender.Text({
            style: {
                fontSize: 14,
                textBackgroundColor: '#FFF',
                textBorderColor: '#000',
                textBorderWidth: 1,
                textBorderRadius: 2,
                textPadding: 5,
            },
            zlevel: 100
        })
        zr.add(Text)
        Text.hide()
    },
    // 繪制縱向文本
    drawText (str, dx, dy) {
        let group = new zrender.Group()

        for (var i = 0; i < str.length; i++) {
            var text = new zrender.Text({
                style: {
                    text: str.charAt(i),
                    fontSize: 14,
                    textFill: '#FF4949',
                    textBackgroundColor: '#FFF',
                }
            })
            let y = 14 * i
            text.attr('position', [0, y])
            group.add(text)
        }

        group.attr('position', [dx, dy])
        return group
    },
    // 繪制實心圓
    drawCircle (Obj, Color) {
        return new zrender.Circle({
            shape: {
                cx: Obj.x,
                cy: Obj.y,
                r: 4
            },
            style: {
                fill: Color
            }
        }).on('mouseover', function () {
            Text.show()

            Text.attr('position', [Obj.x, Obj.y])
            Text.attr({
                style: {
                    text: Obj.txt
                }
            })
        }).on('mouseout', function () {
            Text.hide()
        })
    },
    // 繪制三角形
    drawIsogon (Obj, Color) {
        return new zrender.Isogon({
            shape: {
                x: Obj.x,
                y: Obj.y,
                r: 6,
                n: 3
            },
            style: {
                fill: Color
            }
        }).on('mouseover', function () {
            Text.show()

            Text.attr('position', [Obj.x, Obj.y])
            Text.attr({
                style: {
                    text: Obj.txt
                }
            })
        }).on('mouseout', function () {
            Text.hide()
        })
    },
    // 繪制空心圓
    drawHollowCircle (Obj, Color) {
        return new zrender.Circle({
            shape: {
                cx: Obj.x,
                cy: Obj.y,
                r: 4
            },
            style: {
                fill: '#FFFFFF',
                stroke: Color
            }
        }).on('mouseover', function () {
            Text.show()

            Text.attr('position', [Obj.x, Obj.y])
            Text.attr({
                style: {
                    text: Obj.txt
                }
            })
        }).on('mouseout', function () {
            Text.hide()
        })
    },
    // 繪制×
    drawX (Obj, Color) {
        return new zrender.Text({
            style: {
                text: '×',
                fontSize: 20,
                textFill: Color,
            },
            position: [Obj.x - 7, Obj.y - 11]
        }).on('mouseover', function () {
            Text.show()

            Text.attr('position', [Obj.x, Obj.y])
            Text.attr({
                style: {
                    text: Obj.txt
                }
            })
        }).on('mouseout', function () {
            Text.hide()
        })
    },
    // 繪制圓圈中有點的圓
    drawPointCircle (Obj, Color) {
        var group = new zrender.Group()
        var Point = new zrender.Circle({
            shape: {
                cx: 4,
                cy: 4,
                r: 1
            },
            style: {
                fill: Color
            }
        })
        var OutCircle = new zrender.Circle({
            shape: {
                cx: 4,
                cy: 4,
                r: 4
            },
            style: {
                fill: '#FFFFFF',
                stroke: Color
            }
        })
        group.on('mouseover', function () {
            Text.show()

            Text.attr('position', [Obj.x, Obj.y])
            Text.attr({
                style: {
                    text: Obj.txt
                }
            })
        }).on('mouseout', function () {
            Text.hide()
        })

        group.add(OutCircle)
        group.add(Point)
        group.attr('position', [Obj.x - 3, Obj.y - 3])

        return group
    },
    // 繪制圓圈中有H的圓
    drawHCircle (Obj, Color) {
        var group = new zrender.Group()
        var h = new zrender.Text({
            style: {
                text: 'H',
                fontSize: 8,
                textFill: Color
            },
            position: [2, -1]
        })
        var OutCircle = new zrender.Circle({
            shape: {
                cx: 5,
                cy: 5,
                r: 5
            },
            style: {
                fill: '#FFFFFF',
                stroke: Color
            }
        })
        group.on('mouseover', function () {
            Text.show()
            Text.attr('position', [Obj.x, Obj.y])
            Text.attr({
                style: {
                    text: Obj.txt
                }
            })
        }).on('mouseout', function () {
            Text.hide()
        })

        group.add(OutCircle)
        group.add(h)
        group.attr('position', [Obj.x - 4, Obj.y - 4])

        return group
    },
    // 繪制圓圈中有加號的圓
    drawAddCircle (Obj, Color) {
        var group = new zrender.Group()
        var h = new zrender.Text({
            style: {
                text: '+',
                fontSize: 8,
                textFill: Color
            },
            position: [2, -1]
        })
        var OutCircle = new zrender.Circle({
            shape: {
                cx: 5,
                cy: 5,
                r: 5
            },
            style: {
                fill: '#FFFFFF',
                stroke: Color
            }
        })
        group.on('mouseover', function () {
            Text.show()
            Text.attr('position', [Obj.x, Obj.y])
            Text.attr({
                style: {
                    text: Obj.txt
                }
            })
        }).on('mouseout', function () {
            Text.hide()
        })

        group.add(OutCircle)
        group.add(h)
        group.attr('position', [Obj.x - 4, Obj.y - 4])

        return group
    },
}

最后，需要將Canvas打印出來。我的解決方案是將Canvas轉為圖片。之后將圖片放到你想放的地方即可。

    setTimeout(toImg, 1000)

    function toImg() {
        var canvas = document.querySelector('#main canvas')
        if (canvas) {
            var img = canvas.toDataURL("image/png")
            document.querySelector('#main_img').src = img
        }
    }
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容