使用zrender.js繪製體溫單(1)

以前公司請外包作了一個體溫單使用的zrender.js 可是代碼比較複雜維護性比較低再加上本身技術也不行 最近閒下來的時候看了一下zrender的官網慢慢的摸索並讀了下以前的代碼,感受實際並不難,就本身從新從零開始本身繪製了一個 其中包括了折線,圓點,陰影區域,垂直虛線,鼠標hover事件等衆多內容

今天先說說怎麼畫一個網格 完成效果以下

先把樣式基本代碼寫好

<template>
 <div>
   <div id="main">
   </div>
 </div>
</template>

css

<style scoped>
  #main{
    height: 500px;
    padding: 15px;
    position: relative;
  }
  html,body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  canvas{
    width: 100%;
    height: 700px;
  }
</style>

js

<script>
    import zrender from 'zrender'

    export default {
  name: 'HelloWorld',
  data () {
    return {
      //多少個y軸座標
      xLineLen:{
        //天數 7天 
        day:7,
        //一天多少分段
        time:6
      },
      canavsWidth:0, //畫板寬度
      canavsHeight:0, //畫板高度
      zr:"", //畫板屬性
      yLineLen:{
        XRegion:14, //X軸座標分幾個大塊
        XShare:6, //每塊份幾個小塊
        XLineArr:[4], //須要特殊處理的橫線 衝上往下算
      }
    }
  },
  methods:{
    init(){
      this.zr = zrender.init(document.getElementById("main"))this.canavsWidth = this.zr.getWidth()
      this.canavsHeight = this.zr.getHeight()
      
    }
  },
  mounted(){
    this.init()
  }
}
</script>

this.canavsWidth 爲獲取畫板的寬度 同理下面爲獲取畫板的高度

繪製網格首先要明白x,y軸各須要多少格

首先x軸 咱們要先展現1個星期的數據全部會有7個大格子 而後天天以4小時爲一格來劃分 全部咱們先創建一格全局的變量

//多少個y軸座標

      xLineLen:{

        //天數 7天 

        day:7,

        //一天多少分段

        time:6

      },

　　這裏就定義出x軸線的個數了 接下來是y軸

 yLineLen:{
        XRegion:14, //X軸座標分幾個大塊
        XShare:6, //每塊份幾個小塊
        XLineArr:[4], //須要特殊處理的橫線 衝上往下算
      }

XLineArr 表示格子中那條很長的紅線
數據建好後咱們在init裏添加 2個方法 分別是建立x,y軸的座標

 this.yLine() //生成Y軸座標
 this.xLine() //生成X軸座標

添加完後再methods 裏添加以上2個方法

先說yLine

 //橫座標
      let Xline = new zrender.Line({
        shape:{
          x1:0,
          y1:this.canavsHeight,
          x2:this.canavsWidth,
          y2:this.canavsHeight
        }
      })
      this.zr.add(Xline)

這裏是添加橫座標 是座標軸最下面的那一條先 固然這個不該該寫在這裏當時爲了顯示出x,y初始座標軸在這裏寫了 並不影響咱們其餘方法

x1,y1爲開始座標點x2,y2爲結束座標點從左到右

this.zr.add就是添加2條點並鏈接

 

const yWidth = this.canavsWidth/this.xLineLen.day
      //循環顯示豎線格子
      for (let i = 0; i < this.xLineLen.day; i++) {
         //縱座標
        let Yline = new zrender.Line({
          shape:{
            x1:yWidth*i,
            y1:0,
            x2:yWidth*i,
            y2:this.canavsHeight
          },
          style:{
            opacity:1,
            lineWidth:1.5,
            stroke:"#ff0000"
          }
        })
        this.zr.add(Yline)
      }

這裏的yWidth 表明的是一個大格子有好寬  用畫布寬度除之前面咱們定義的天數就是每個大格子的寬度

而後咱們循環咱們定義的天數  style裏

opacity 表明透明度

lineWidth 表明線段的寬度

stroke 表明線段填充的顏色
這步完成界面應該就會出現7條紅色的豎線

      let yLinAll = this.xLineLen.day*this.xLineLen.time
      for (let i = 0; i < yLinAll; i++) {
        
         let Yline = new zrender.Line({
          shape:{
            x1:yWidth/this.xLineLen.time*i,
            y1:0,
            x2:yWidth/this.xLineLen.time*i,
            y2:this.canavsHeight
          },
          style:{
            opacity:1,
            lineWidth:0.3,
            stroke:"#000"
          }
        })
        this.zr.add(Yline)
      }

yLinAll 表明一共有多少天 咱們先算出總天數而後循環總天數這樣咱們就能畫出每一個大格子裏的小格子了
style裏的參數參考上一條 也能夠查看官網

這步完成y軸座標就算是畫好了接下來咱們畫x軸 在xLine方法裏寫

let xHeight = this.canavsHeight/this.yLineLen.XRegion
let XShareAll = this.yLineLen.XRegion*this.yLineLen.XShare

xHeight 表明一個大格子的高度

XShareAll 表明一個多少個小格子

for (let i = 0; i < this.yLineLen.XRegion; i++) {
        let color = "#000"
        this.yLineLen.XLineArr.forEach(el => {
          if (el == i) {
            color = "#ff0000"
          }
        });
        //橫座標 加粗
        let Xline = new zrender.Line({
          shape:{
            x1:0,
            y1:xHeight*i,
            x2:this.canavsWidth,
            y2:xHeight*i
          },
          style:{
            opacity:1,
            lineWidth:2,
            stroke:color
          }
        })
        this.zr.add(Xline)

先循環把大格子循環出來

       for (let a = 0; a < XShareAll; a++) {
          //橫座標
          let Xline = new zrender.Line({
            shape:{
              x1:0,
              y1:xHeight/this.yLineLen.XShare*a,
              x2:this.canavsWidth,
              y2:xHeight/this.yLineLen.XShare*a
            },
            style:{
              opacity:1,
              lineWidth:0.1,
              stroke:"#000"
            }
          })
          this.zr.add(Xline)
        }

在循環出全部的小格子 入下圖上下的格子  以前咱們循環的是左右的格子

這步完成了 咱們的體溫單的座標格子應該就畫好了  時間緣由今天就先寫到這 下次寫折線圖和圓點的畫法 折線圖斷線垂直虛線第一次寫文章寫得很差不要噴我