首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用zrender.js绘制体温单效果

Posted in Javascript onOctober 31, 2019

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

使用zrender.js绘制体温单效果

 以下为模拟数据

[{"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绘制体温单效果

 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绘制体温单效果

　

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绘制体温单效果

总结

以上所述是小编给大家介绍的使用zrender.js绘制体温单效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

使用zrender.js绘制体温单效果

- Author -

hpr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery下扩展插件和拓展函数的写法（匿名函数使用的典型例子）
Oct 20 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
javascript字符串函数汇总
Dec 06 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 #Javascript
selenium+java中用js来完成日期的修改
Oct 31 #Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 #Javascript
vue项目出现页面空白的解决方案
Oct 31 #Javascript
vue项目引入ts步骤(小结)
Oct 31 #Javascript
微信小程序canvas分享海报功能
Oct 31 #Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 #Javascript
瑞典购物网站(55) 欧洲购物网站(15) 葡萄牙购物网站(13) 荷兰购物网站(99) 芬兰购物网站(10) 挪威购物网站(7) 南非购物网站(8) 哥伦比亚购物网站(5) 比利时购物网站(33) 泰国购物网站(30)
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
js操作两个json数组合并、去重，以及删除某一项元素
2020/09/22 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python元字符的用法实例解析
2018/01/17 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Monnier Frères美国官网：法国知名奢侈品网站
2016/11/22 全球购物
《乞巧》教学反思
2014/02/27 职场文书
怎么写好自荐书
2014/03/02 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
入职担保书怎么写
2014/05/12 职场文书
怎样写辞职信
2015/02/27 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js
springboot如何初始化执行sql语句
2021/06/22 Java/Android