使⽤zrender.js绘制体温单效果
今天我们来画折线图效果图
以下为模拟数据
[{"time":19,"text":"⼊\n院\n19\n时\n11\n分","position":42,"cellMin":29.0,"cellSplit":0.2,"type":"text","color":"r
ed","shape":null},{"time":22,"text":"⼿\n术","position":42,"cellMin":29.0,"cellSplit":0.2,"type":"text","color":"red","shape":null},{"time":129,"text":"⼿\n术","p  　⾸先创建filterData⽅法⽤于过滤数据 text⽂本 line线段 area圆 tag暂时⽤不到今天说的是折线所以创建zrLine ⽅法
filterData(){
const data = chartData
data.forEach(el => {
switch (el.type) {
case "text":
// Text(el)
break;
case "line":
break;
case "area":
break;
case "tag":
break;
default:
break;
}
});
}
我们在新增⼀个⽂件夹创建utli.js这个⽂件夹的作⽤为我们把创建线创建圆的公共⽅法写在这个js⽂件⾥
utli.js 我们先说 createLine createCircle
createLine 需要传5个参数分别为开始点的横纵坐标结束点的横纵坐标还有线的样式
createCircle 需要传4个参数分别为圆点的横纵坐标圆的半径和样式
addHover 也需要这时我们需要在init ⽅法⾥添加⼀段代码(上⼀章创建的初始化⽅法) 这段代码为创建⼀个div到时我们⿏标移到圆上会弹出⽂本信息的时候回⽤到
var div = ateElement("div")
div.classList.add("tips")
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 横坐标 cy纵坐标 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轴坐标 y y轴坐标 shapeOn⿏标移⼊⼀些属性配置 shapeOn⿏标移出⼀些属性配置 shape配置项看官⽹
export const addHover = (el,config,x,y,shapeOn,shapeOut) => {
const domTips = ElementsByClassName("tips")
<('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变量到时好实现⾃定义
var style = {}
switch (data.shape) {
case "x-circle":
style = {
lor,
fill:"#fff",
text:"x",
}
break;
case "empty-circle":
style = {
lor,
fill:"#fff",
text:"",
}
break;
default:
break;
}
这⾥需要在添加2个⽅法
getX
//获取X坐标 data当前时间点
getX(data){
let XShareOne = this.XShareOne()
return data * XShareOne
},
transformY
//转换y轴坐标点为正确坐标点因为y轴坐标是顶点为0递增的所有⽤总⾼度减去原来坐标的⾼度剩下的⾼度就是正确坐标点
//i代表⼀个格⼦代表⼏个⾼度
transformY(data,i){
let YHeight = this.YShareOne()
//计算出剩余⾼度
let surplusHeight = this.canavsHeight - (YHeight/i) * data
return surplusHeight
},
这段代码意思是先把数据遍历出来在通过time属性计算出x坐标 value值计算出y坐标 x轴左边基本是以time为基本来计算的 y轴坐标可能会随数据变化⽽有所改变 Break属性为是否断线如果需要断线就位true
data.array.forEach((el,i) =>{
if (i > 0) {
let XShareOne = this.XShareOne()
let firstX = X(data.array[i-1].time)
let firstY = ansformY(data.array[i-1].value,1)
let x = X(data.array[i].time)
let y = ansformY(data.array[i].value,1)
if (data.array[i-1].Break == "false") {
let line = createLine(firstX,firstY,x,y,{
stroke:"#af2377",
lineWidth:2,
})
}
}
if (el.extraArr && el.extraArr.length > 0) {
let x = X(el.time)
let y = ansformY(el.value,1)
let lastY = a,1)
let dottedLine = createLine(x,y,x,lastY,{
stroke:"#af2377",
lineWidth:2,
lineDash:[2,2]
})
let getY = a,1)
let Circle = createCircle(x,getY,5,{
aColor,
fill:"#fff",
})
addHover(Circle,{
aTips,
},x,getY,{
r:8,
},{
r:5,
})代码运行js特效
})
})
}
let getX = X(el.time)
let getY = ansformY(el.value,1)
let Circle = createCircle(getX,getY,5,style)
addHover(Circle,el,getX,getY,{
r:8,
})
})
这步完成折线图应该就画好了
下次我们将阴影的画法
总结
以上所述是⼩编给⼤家介绍的使⽤zrender.js绘制体温单效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！