使用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文件里

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

 

 

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

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

下次我们讲阴影的画法