使用vue+zrender绘制体温单 三测单(2)

预览地址 http://132.232.99.217:8090/#/

上期我们说了如何创建项目并把各个项目的文件结构创建好后这期我们来说如何画出图中代写线段

首先我们在src/components/Render.vue中添加一下引用

import zrender from 'zrender'
import {chartData,configData} from '@/mock/index' 这是mock数据
import { createLine,createCircle,addHover,createPolygon,hoverLine } from '../js/utli' 这是负责创建线段 阴影图等 公共方法 该文件在文章底部
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' 这是vuex负责存储数据

然后我们在data里写入以下属性

//线段开始横坐标
      lineStartX:0,
      //线段开始纵坐标
      lineStartY:0,
      //线段结束横坐标
      lineEndX:0,
      //线段结束纵坐标
      LineEndY:0,
      //多少个y轴坐标
      xLineLen:{
        //天数 7天 
        day:0,
        //一天多少分段
        time:6
      },
      canavsWidth:0, //画板宽度
      canavsHeight:0, //画板高度
      zr:"", //画板属性
      yLineLen:{
        XRegion:13, //X轴坐标分几个大块
        XShare:5, //每块份几个小块
        XLineArr:[3], //需要特殊处理的横线 冲上往下算
      },
      YLineReset:[], //Y轴每一小格