使用zrender.js繪制體溫單效果
更新時間：2019年10月31日 13:34:23 作者：hpr
這篇文章主要介紹了使用zrender.js繪制體溫單效果,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
今天我們來畫折線圖 效果圖
以下為模擬數(shù)據(jù)
[{"time":19,"text":"入\n院\n19\n時\n11\n分","position":42,"cellMin":29.0,"cellSplit":0.2,"type":"text","color":"red","shape":null},{"time":22,"text":"手\n術(shù)","position":42,"cellMin":29.0,"cellSplit":0.2,"type":"text","color":"red","shape":null},{"time":129,"text":"手\n術(shù)","position":42,"cellMin":29.0,"cellSplit":0.2,"type":"text","color":"red","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":30.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":31.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":32.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":33.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":34.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":35.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":36.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":37.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":38.0,"type":"baseline","color":"#000","shape":null},{"cellMin":28.0,"cellSplit":0.2,"y":39.0,"type":"baseline","color":"red","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":40.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":41.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"y":42.0,"type":"baseline","color":"#000","shape":null},{"cellMin":29.0,"cellSplit":0.2,"array":[{"time":19,"tips":"體溫37.1","value":"37.1","shape":"x","Break":"false","type":"temperature","extraArr":[],"others":[]},{"time":21,"tips":"體溫36.9","value":"36.9","shape":"x","Break":"false","type":"temperature","extraArr":[],"others":[]},{"time":30,"tips":"體溫36.5","value":"36.5","shape":"x","Break":"false","type":"temperature","extraArr":[],"others":[]},{"time":38,"tips":"體溫36.6","value":"36.6","shape":"x","Break":"false","type":"temperature","extraArr":[],"others":[]},{"time":54,"tips":"體溫36.7","value":"36.7","shape":"x","Break":"false","type":"temperature","extraArr":[],"others":[]}],"type":"line","color":"blue","shape":"x-circle"},{"cellMin":-10.0,"cellSplit":2.0,"array":[{"time":19,"shape":"empty-circle","tips":"呼吸20","value":"20","Break":"false"},{"time":21,"shape":"empty-circle","tips":"呼吸20","value":"20","Break":"false"},{"time":30,"shape":"empty-circle","tips":"呼吸19","value":"19","Break":"false"},{"time":38,"shape":"empty-circle","tips":"呼吸18","value":"18","Break":"false"},{"time":54,"shape":"empty-circle","tips":"呼吸19","value":"19","Break":"false"}],"type":"line","color":"black","shape":"empty-circle"},{"cellMin":-2.0,"cellSplit":1.0,"array":[{"time":19,"tips":"疼痛7","value":"7","Break":"false","type":"pain","extraArr":[{"extra":"3","extraColor":"red","extraTips":"疼痛評價3"}],"others":[]},{"time":23,"tips":"疼痛3","value":"3","Break":"false","type":"pain","extraArr":[],"others":[]},{"time":27,"tips":"疼痛3","value":"3","Break":"false","type":"pain","extraArr":[],"others":[]},{"time":33,"tips":"疼痛3","value":"3","Break":"false","type":"pain","extraArr":[],"others":[]},{"time":39,"tips":"疼痛3","value":"3","Break":"false","type":"pain","extraArr":[{"extra":"3","extraColor":"red","extraTips":"疼痛評價3"}],"others":[]},{"time":44,"tips":"疼痛3","value":"3","Break":"false","type":"pain","extraArr":[],"others":[]},{"time":51,"tips":"疼痛3","value":"3","Break":"false","type":"pain","extraArr":[],"others":[]},{"time":58,"tips":"疼痛3","value":"3","Break":"false","type":"pain","extraArr":[{"extra":"3","extraColor":"red","extraTips":"疼痛評價3"}],"others":[]}],"type":"line","color":"red","shape":"empty-circle"},{"bgColor":"rgba(255,0,0,0.7)","cellMin":30.0,"cellSplit":2.0,"array":[{"time":19,"v1":69,"v1Tips":"心率69","v2":69,"v2Tips":"脈搏69","Break":"false"},{"time":21,"v1":70,"v1Tips":"心率70","v2":70,"v2Tips":"脈搏70","Break":"false"},{"time":30,"v1":83,"v1Tips":"心率83","v2":83,"v2Tips":"脈搏83","Break":"false"},{"time":38,"v1":78,"v1Tips":"心率78","v2":78,"v2Tips":"脈搏78","Break":"false"},{"time":54,"v1":77,"v1Tips":"心率77","v2":77,"v2Tips":"脈搏77","Break":"false"}],"type":"area","color":"red","shape":null},{"text":null,"y":"28","cellMin":-10.0,"cellSplit":2.0,"array":[],"type":"tag","color":"black","shape":null},{"text":null,"y":null,"cellMin":30.0,"cellSplit":2.0,"array":[],"type":"tag","color":"black","shape":null}]
首先創(chuàng)建filterData方法 用于過濾數(shù)據(jù) text文本 line線段 area圓 tag暫時用不到 今天說的是折線所以創(chuàng)建zrLine 方法
filterData(){
const data = chartData
data.forEach(el => {
switch (el.type) {
case "text":
// this.zrText(el)
break;
case "line":
this.zrLine(el)
break;
case "area":
this.zrPolyline(el)
break;
case "tag":
this.zrTag(el)
break;
default:
break;
}
});
}
我們在新增一個文件夾創(chuàng)建utli.js這個文件夾的作用為我們把創(chuàng)建線創(chuàng)建圓的公共方法寫在這個js文件里
utli.js 我們先說 createLine createCircle
createLine 需要傳5個參數(shù)分別為開始點的橫縱坐標(biāo) 結(jié)束點的橫縱坐標(biāo) 還有線的樣式
createCircle 需要傳4個參數(shù)分別為 圓點的橫縱坐標(biāo) 圓的半徑 和樣式
addHover 也需要 這時我們需要在init 方法里添加一段代碼(上一章創(chuàng)建的初始化方法) 這段代碼為創(chuàng)建一個div到時我們鼠標(biāo)移到圓上會彈出文本信息的時候回用到
var div = document.createElement("div")
div.classList.add("tips")
document.getElementById("main").append(div)
utli.js
//線段
export const createLine = (x1,y1,x2,y2,style)=>{
return new zrender.Line({
shape:{
x1:x1,
y1:y1,
x2:x2,
y2:y2
},
style:style,
});
};
// cx 橫坐標(biāo) cy縱坐標(biāo) r半徑 空心圓
export const createCircle = (cx,cy,r,style)=>{
return new zrender.Circle({
shape:{
cx:cx,
cy:cy,
r:r
},
style:style,
zlevel:4
})
}
//添加horver事件 el 元素對象 config 一些配置項 x x軸坐標(biāo) y y軸坐標(biāo) shapeOn鼠標(biāo)移入一些屬性配置 shapeOn鼠標(biāo)移出一些屬性配置 shape配置項看官網(wǎng)
export const addHover = (el,config,x,y,shapeOn,shapeOut) => {
const domTips = document.getElementsByClassName("tips")
el.on('mouseover',function(){
domTips[0].innerHTML = config.tips
domTips[0].setAttribute("style",`position:absolute;top:${y-13}px;left:${x}px;display:block;font-size:10px;background-color:rgba(0,0,0,.7);padding:3px;border-radius:3px;color:#fff`)
el.animateTo({
shape:shapeOn
},100,0)
}).on('mouseout',function () {
domTips[0].setAttribute("style",`display:none`)
el.animateTo({
shape:shapeOut
},100,0)
})
}
//多邊形
export const createPolygon = (points,style) => {
return new zrender.Polyline({
shape:{
points:points,
},
style:style
})
}
zrLine方法里的第一段代碼 判斷這個折線拐點是需要空心圓還是實心圓還是其他的形狀 都通過shape決定 color為圓的邊框顏色填充色為白色 先定義一個style變量到時好實現(xiàn)自定義
var style = {}
switch (data.shape) {
case "x-circle":
style = {
stroke:data.color,
fill:"#fff",
text:"x",
}
break;
case "empty-circle":
style = {
stroke:data.color,
fill:"#fff",
text:"",
}
break;
default:
break;
}
這里需要在添加2個方法
getX
//獲取X坐標(biāo) data當(dāng)前時間點
getX(data){
let XShareOne = this.XShareOne()
return data * XShareOne
},
transformY
//轉(zhuǎn)換y軸坐標(biāo)點為正確坐標(biāo)點 因為y軸坐標(biāo)是頂點為0遞增的 所有用總高度減去原來坐標(biāo)的高度剩下的高度就是正確坐標(biāo)點
//i代表一個格子代表幾個高度
transformY(data,i){
let YHeight = this.YShareOne()
//計算出剩余高度
let surplusHeight = this.canavsHeight - (YHeight/i) * data
return surplusHeight
},
這段代碼意思是先把數(shù)據(jù)遍歷出來 在通過time屬性計算出x坐標(biāo) value值計算出y坐標(biāo) x軸左邊基本是以time為基本來計算的 y軸坐標(biāo)可能會隨數(shù)據(jù)變化而有所改變 Break屬性為是否斷線 如果需要斷線就位true
data.array.forEach((el,i) =>{
if (i > 0) {
let XShareOne = this.XShareOne()
let firstX = this.getX(data.array[i-1].time)
let firstY = this.transformY(data.array[i-1].value,1)
let x = this.getX(data.array[i].time)
let y = this.transformY(data.array[i].value,1)
if (data.array[i-1].Break == "false") {
let line = createLine(firstX,firstY,x,y,{
stroke:"#af2377",
lineWidth:2,
})
this.zr.add(line)
}
}
if (el.extraArr && el.extraArr.length > 0) {
el.extraArr.forEach((item,a) => {
let x = this.getX(el.time)
let y = this.transformY(el.value,1)
let lastY = this.transformY(item.extra,1)
let dottedLine = createLine(x,y,x,lastY,{
stroke:"#af2377",
lineWidth:2,
lineDash:[2,2]
})
this.zr.add(dottedLine)
el.extraArr.forEach((item,a) => {
let getY = this.transformY(item.extra,1)
let Circle = createCircle(x,getY,5,{
stroke:item.extraColor,
fill:"#fff",
})
this.zr.add(Circle)
addHover(Circle,{
tips:item.extraTips,
},x,getY,{
r:8,
},{
r:5,
})
})
})
}
let getX = this.getX(el.time)
let getY = this.transformY(el.value,1)
let Circle = createCircle(getX,getY,5,style)
this.zr.add(Circle)
addHover(Circle,el,getX,getY,{
r:8,
},{
r:5,
})
})
這步完成折線圖應(yīng)該就畫好了
下次我們將陰影的畫法
總結(jié)
以上所述是小編給大家介紹的使用zrender.js繪制體溫單效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
本文通過簡單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式 ，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
javascript+css 網(wǎng)頁每次加載不同樣式的實現(xiàn)方法
用戶每次訪問時隨機(jī)載入樣式，讓微博在視覺上保持新鮮感。雖然思路與實現(xiàn)都比較簡單，但還是想記錄下來，與大家分享。2009-12-12
js事件監(jiān)聽機(jī)制(事件捕獲)總結(jié)
添加事件的js方法也很多，有直接加到頁面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽的方法，由于各個瀏覽器對事件冒泡事件監(jiān)聽的機(jī)制不同2014-08-08
Django模板系統(tǒng)提供了一套豐富的工具集,能夠幫助開發(fā)者將動態(tài)數(shù)據(jù)有效地渲染到HTML頁面中,它通過特殊的語法支持變量插入、邏輯標(biāo)簽和過濾器的使用,本文給大家介紹Django 中的templates使用,感興趣的朋友一起看看吧2024-10-10
CSS的確是很強(qiáng)大，很奇妙。很多愛好者時?？梢杂肅SS做出一些讓人意想不到的效果，比如用CSS做的燈籠、用CSS畫的房子！然而這些東西酷歸酷，說到底還只是一些不實用的東西。過濾之，過濾之……2008-11-11
JavaScript?中如何攔截全局?Fetch?API?的請求和響應(yīng)問題
在本文中，我們介紹了什么是 JavaScript 攔截器，學(xué)習(xí)了如何通過給 Fetch API 使用猴子補(bǔ)丁和使用 fetch-intercept 庫來創(chuàng)建攔截器，對js攔截全局Fetch?API的請求和響應(yīng)知識感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要介紹了js怎么覆蓋原有方法實現(xiàn)重寫,需要的朋友可以參考下2014-09-09
這篇文章給大家介紹IE6兼容透明背景圖片以及在IE6中的透明圖片不是透明顯示的解決方案,有需要的朋友可以參考下2015-08-08
在日常的開發(fā)過程中,我們經(jīng)常遇到下拉刷新的場景,很方便的刷新游覽的內(nèi)容,在此實現(xiàn)了一個下拉刷新的自定義組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript提取 PDF 圖片,即把每一頁里的多張圖片都提取出來,不是把一整頁都轉(zhuǎn)換為一張圖片,感興趣的可以了解下2025-03-03