首页
所有分类
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 相关文章推荐
js 获取radio按钮值的实例
Aug 17 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
初学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
geoserver(1) 绝对定位(1) 索引树扫描(1) 匹配(1) 相对定位(1) sql模式(1) into outfile(1) 逻辑备份(1) lua(3) 全表扫描(1)
You might like
php include,include_once,require,require_once
2008/09/05 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
降低PHP Redis内存占用
2017/03/23 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
初学python数组的处理代码
2011/01/04 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python中数字是否为可变类型
2020/07/08 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
选购国际女性时装设计师品牌：IFCHIC（支持中文）
2018/04/12 全球购物
关于保护环境的建议书
2014/05/13 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016年敬老月活动总结
2016/04/05 职场文书