欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-07 09:20:46
今天我们来画折线图 效果图 以下为模拟数据 首先创建filterData方法 用于过滤数据 text文本 line线段 area圆 tag暂时用不到 今天说的是折线所以创建zrLine 方法 我们在新增一个文件夹创建utli.js这个文件夹的作用为我们把创建线创建圆的公共方法写在这个js文件里 ut ......

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

使用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,"cellsplit":0.2,"type":"text","color":"red","shape":null},{"time":129,"text":"手\n术","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}]

  首先创建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文件里
使用zrender.js绘制体温单(2)

 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)

 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变量到时好实现自定义
使用zrender.js绘制体温单(2)

 

 

   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
    },
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,
        })
      })

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

下次我们讲阴影的画法  使用zrender.js绘制体温单(2)