html 绘制体温单,使用zrender.js绘制体温单(2)

最新推荐文章于 2023-05-07 15:10:52 发布

weixin_39922769

最新推荐文章于 2023-05-07 15:10:52 发布

阅读量615

点赞数 1

文章标签： html 绘制体温单

今天我们来画折线图效果图

以下为模拟数据

首先创建filterData方法用于过滤数据 text文本 line线段 area圆 tag暂时用不到今天说的是折线所以创建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;

}

});

}

我们在新增一个文件夹创建utli.js这个文件夹的作用为我们把创建线创建圆的公共方法写在这个js文件里

utli.js 我们先说 createLine createCircle

createLine 需要传5个参数分别为开始点的横纵坐标结束点的横纵坐标还有线的样式

createCircle 需要传4个参数分别为圆点的横纵坐标圆的半径和样式

addHover 也需要这时我们需要在init 方法里添加一段代码(上一章创建的初始化方法) 这段代码为创建一个div到时我们鼠标移到圆上会弹出文本信息的时候回用到

var div = document.createElement("div")

div.classList.add("tips")

document.getElementById("main").append(div)

View Code

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 = 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变量到时好实现自定义

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坐标 data当前时间点

getX(data){

let XShareOne = this.XShareOne()

return data * XShareOne

View Code

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 = 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,

})

这步完成折线图应该就画好了

下次我们讲阴影的画法

https://gitee.com/hpr/Temperature.git git地址

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[使用zrender.js绘制体温单(2)]http://www.zyiz.net/tech/detail-94051.html

weixin_39922769

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 绘制体温单,使用zrender.js绘制体温单(2)

今天我们来画折线图效果图以下为模拟数据[{"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术","position":42,"cellMin":29.0...
复制链接

扫一扫