預覽地址 http://106.12.212.110:8077/#/
上期我們說了如何創建專案并把各個專案的檔案結構創建好后這期我們來說如何畫出圖中代寫線段
首先我們在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軸每一小格份幾份
width:0,
YCellHeight:0, //y軸大格子高度
lastData:0, //上一個資料
CircleSize:8, //畫板上圓點的直徑
hoverCircleSize:10,//畫板上圓點移入變化的直徑
fontSize:15, //畫板上圓圈里的字體大小
這些屬性都是以資料的形式來創建畫板的橫坐標 豎坐標 橫線 豎線 基礎屬性創建好后我們在methods里先創建一個init方法 該方法負責初始化創建一個cavans畫板 以及獲取一些頁面基礎屬性
init(){
this.zr = zrender.init(document.getElementById("main"))
var div = document.createElement("div")
div.classList.add("tips")
document.getElementById("main").append(div)
this.canavsWidth = this.zr.getWidth()
this.canavsHeight = this.zr.getHeight()
if (this.httpType == 'http') {
this.$axios({
method:'post',
url:`${this.configUrl}/api/PatrolInfo/ChartData`,
data:{"PatientCode":this.urlData['cstId'],"beginDate":this.urlData['begin'],"endDate":this.urlData['end'],"PatroInfoType":this.urlData['PatroInfoType']},
}).then(res => {
res = res.data.Data
this.xLineLen.time = this.TimeArr.length
this.YLineReset = this.resetY(this.TimeArr)
this.filterData(res)
this.yLine() //生成Y軸坐標
this.xLine() //生成X軸坐標
this.getCellHeight()
})
}else{
this.xLineLen.time = this.TimeArr.length
this.xLineLen.day = 7
this.YLineReset = this.resetY(this.TimeArr)
this.filterData(chartData)
this.yLine() //生成Y軸坐標
this.xLine() //生成X軸坐標
this.getCellHeight()
}
// this.hoverLine()
},
這里使用了一個判斷 來判斷當前是本地版本還是線上版本
這里的httpType通過src/store/http.js來配置是本地還是線上 沒有檔案請先創建
http.js httpType是mock就是本地 http就是線上
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
configUrl:'', //先自己的請求地址
httpType:"mock",
data:JSON.parse(localStorage.getItem('patientData')), //此方法可用可不用 用于基礎普通html專案是使用
},
mutations:{
},
actions:{
getUrlData(context){
context.commit('setUrlData',data)
}
}
})
export default store
init方法創建好后里面有4個方法分別是
this.filterData(res) 過濾資料 this.yLine() //生成Y軸坐標 this.xLine() //生成X軸坐標 this.getCellHeight() 獲取格子的總高度yLine() {
//橫坐標 最底部橫坐標
let Xline = new zrender.Line({
shape:{
x1:0,
y1:this.canavsHeight,
x2:this.canavsWidth,
y2:this.canavsHeight
}
})
this.zr.add(Xline)
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,
stroke:"#ff0000"
}
})
this.zr.add(Yline)
}
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.5,
stroke:"#000"
}
})
this.zr.add(Yline)
}
},
xLine(){
let xHeight = this.canavsHeight/this.yLineLen.XRegion
let XShareAll = this.yLineLen.XRegion*this.yLineLen.XShare
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.4,
stroke:"#000"
}
})
this.zr.add(Xline)
}
}
},
filterData(data){
//重置資訊 避免重復出現的bug
this.lastData = https://www.cnblogs.com/hprBlog/p/0
data.forEach((el,i) => {
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;
}
});
},
橫縱坐標創建好后我們就開始創建折線 陰影等圖
//繪制文本內容
zrText(data){
if (this.xLineLen.day*24 >= data.time) {
//最小值
const cellMin = data.cellMin
//坐標軸每格代表值
const cellSplit = data.cellSplit
var textWidthHeight = 15 //一個字的原始寬度高度
var textHeight = 0 //字體總高度
var textWidth = textWidthHeight //字體總寬度
var moveRange = textWidthHeight/2 //需要移動的距離 用于移動字體下面的矩形背景框
//計算文本高度
if (data.text) {
let dataLen = data.text.split("\n").length
//需要換行的字體 移動距離是字體的一半 每個字寬度，高度為12
if (dataLen > 1) {
textHeight = dataLen * textWidthHeight
textWidth = textWidthHeight
} else {
let textLen = data.text.length
textHeight = textWidthHeight
textWidth = textWidthHeight * textLen
moveRange = textWidthHeight
}
}
let xWidth = this.XShareOne(data.time)
//如果和上一個時間相同就往后移動
if ( this.lastData != 0 || data.time <= 1 ) {
if (this.lastData =https://www.cnblogs.com/hprBlog/p/= data.time) {
xWidth = xWidth + textWidth + 5
}
}
this.lastData = https://www.cnblogs.com/hprBlog/p/data.time //存入當前時間 用于重合區分
let YHeight = this.YShareOne().height
let y = this.transformY(data.position,cellSplit,cellMin)
let state = new zrender.Group();
state.add(
new zrender.Rect({
shape:{
x:xWidth-(textWidth/2),
y:y,
width:textWidth,
height:textHeight
},
style:{
fill:"#FFF"
},
zlevel:4
})
)
state.add(
new zrender.Text({
style:{
text:data.text,
textShadowColor:"#fff",
textStroke:"#fff",
textFill:data.color,
textAlign:"center",
fontSize:13
},
position:[xWidth,y],
zlevel:4
})
);
this.zr.add(state)
}
},
zrLine(data){
var style = {}
//最小值
const cellMin = data.cellMin
//坐標軸每格代表值
const cellSplit = data.cellSplit
data.array.forEach((el,i) =>{
//過濾shape 個別需特殊處理 后期需優化
switch (el.shape) {
case "x-circle":
style = {
stroke:data.color,
fill:"#fff",
text:"x",
fontSize:this.fontSize
}
break;
case "empty-circle":
style = {
stroke:data.color,
fill:"#fff",
text:"",
}
break;
case 'x':
style = {
stroke:data.color,
fill:"#fff",
text:"x",
fontSize:this.fontSize
}
break;
case 'o-circle':
style = {
stroke:data.color,
fill:"#fff",
text:"●",
fontSize:this.fontSize
}
break;
case '':
style = {
stroke:data.color,
fill:data.color,
text:"",
}
break;
default:
break;
}
//疼痛單獨處理
if (el.type == "pain") {
style = {
stroke:data.color,
fill:"#fff",
text:"",
}
}
if (i > 0) {
let firstX = this.getX(data.array[i-1].time)
let firstY = this.transformY(data.array[i-1].value,cellSplit,cellMin)
let x = this.getX(data.array[i].time)
let y = this.transformY(data.array[i].value,cellSplit,cellMin)
if (data.array[i-1].Break == "false") {
let line = createLine(firstX,firstY,x,y,{
stroke:data.color,
lineWidth:2,
})
this.zr.add(line)
}
}
if (el.extraArr && el.extraArr.length > 0) {
el.extraArr.forEach((item,a) => {
console.log(item);
let x = this.getX(el.time)
let y = this.transformY(el.value,cellSplit,cellMin)
let lastY = this.transformY(item.extra,cellSplit,cellMin)
let dottedLine = createLine(x,y,x,lastY,{
stroke:data.color,
lineWidth:3,
lineDash:[2,2]
})
this.zr.add(dottedLine)
el.extraArr.forEach((item,a) => {
let getY = this.transformY(item.extra,cellSplit,cellMin)
let Circle = createCircle(x,getY,this.CircleSize,{
stroke:item.extraColor,
fill:"#fff",
})
this.zr.add(Circle)
addHover(Circle,{
tips:item.extraTips,
},x,getY,{
r:this.hoverCircleSize,
},{
r:this.CircleSize,
})
})
})
}
let getX = this.getX(el.time)
let getY = this.transformY(el.value,cellSplit,cellMin)
let Circle = createCircle(getX,getY,this.CircleSize,style)
this.zr.add(Circle)
addHover(Circle,el,getX,getY,{
r:this.hoverCircleSize,
},{
r:this.CircleSize,
})
})
},
//多邊形
zrPolyline(data){
console.log(data);
//最小值
const cellMin = data.cellMin
//坐標軸每格代表值
const cellSplit = data.cellSplit
var points = []
data.array.forEach((el,i) => {
//生成圓點
let cx = this.getX(el.time)
let cy1 = this.transformY(el.v1,cellSplit,cellMin)
let Circle1 = createCircle(cx,cy1,this.CircleSize,{
stroke:data.color,
fill:"#fff",
text:"",
})
this.zr.add(Circle1)
addHover(Circle1,{tips:el.v1Tips},cx,cy1,{
r:this.hoverCircleSize,
},{
r:this.CircleSize,
})
let cy2 = this.transformY(el.v2,cellSplit,cellMin)
let Circle2 = createCircle(cx,cy2,this.CircleSize,{
stroke:data.color,
fill:data.color,
text:"",
})
this.zr.add(Circle2)
addHover(Circle2,{tips:el.v2Tips},cx,cy2,{
r:this.hoverCircleSize,
},{
r:this.CircleSize,
})
if (i > 0) {
if (data.array[i-1].Break == "false") {
points = []
let pox1 = this.getX(data.array[i-1].time)
let poy1 = this.transformY(data.array[i-1].v1,cellSplit,cellMin)
let poy2 = this.transformY(data.array[i-1].v2,cellSplit,cellMin)
let pox3 = this.getX(el.time)
let poy3 = this.transformY(el.v1,cellSplit,cellMin)
let poy4 = this.transformY(el.v2,cellSplit,cellMin)
points.push([pox1,poy1],[pox1,poy2],[pox3,poy4],[pox3,poy3],[pox1,poy1])
let area = createPolygon(points,{
fill:data.bgColor,
opacity:0.8,
stroke:data.color
})
this.zr.add(area)
}
}
})
},
zrTag(data){
//最小值
const cellMin = data.cellMin
//坐標軸每格代表值
const cellSplit = data.cellSplit
if (data.text == "R") {
data.array.forEach((el,i) => {
let x = this.getX(el.time)
let y = this.transformY(el.value,cellSplit,cellMin)
let Circle = createCircle(x,y,this.CircleSize,{
text:data.text,
fill:"#fff",
stroke:data.color,
textVerticalAlign:"middle",
textAlign:"center",
})
this.zr.add(Circle)
addHover(Circle,{tips:""},0,0,{
r:this.hoverCircleSize,
},{
r:this.CircleSize,
})
})
}
if(data.text == "H"){
data.array.forEach((el,i) => {
let x = this.getX(el.time)
let y = this.transformY(el.y,cellSplit,cellMin)
let Circle = createCircle(x,y,this.CircleSize,{
text:data.text,
fill:"#fff",
stroke:data.color,
textVerticalAlign:"middle",
textAlign:"center"
})
this.zr.add(Circle)
addHover(Circle,{tips:""},0,0,{
r:this.hoverCircleSize,
},{
r:this.CircleSize,
})
})
}
},
創建圖形是還需要寫幾個方法
用于獲取x軸小格子的寬度
y軸小格子寬度
以及每日時間變化后每個坐標點的定位
//每個x軸小格子寬度是多少
XShareOne(data){
let widthArr = [] //每格寬度 全部存入陣列
var width = 0
let YLineResetAll = [] //7天所有份數
for (let i = 0; i < 7; i++) {
YLineResetAll.push(...this.YLineReset)
}
for (let i = 0; i < parseInt(data); i++) {
width = YLineResetAll[i].width + width
}
return width
},
//每個Y軸小格子寬度是多少
YShareOne(){
//計算大格子里的每格小格子高度
let childerHeight = this.canavsHeight/this.yLineLen.XRegion/this.yLineLen.XShare
//計算大格高度
let height = this.canavsHeight/this.yLineLen.XRegion
return {height:height,childerHeight:childerHeight}
},
//轉換y軸坐標點為正確坐標點 因為y軸坐標是頂點為0遞增的 所有用總高度減去原來坐標的高度剩下的高度就是正確坐標點
//i代表一個格子代表幾個高度
transformY(data,i,cellMin){
let YHeight = this.YShareOne().height
let YHeightChilder = this.YShareOne().childerHeight
let xAll = this.yLineLen.XRegion //一共多少個橫坐標 大的
let surplusHeight
var cellAll = this.yLineLen.XRegion*this.yLineLen.XShare //一共多少個橫坐標
let index = cellMin
var aIndex = 0
let lastNumber = 0
//總共占幾格
for (let a = 0; a < cellAll; a++) {
//每格代表的值小于0的時候 需要特殊處理
if (parseInt(i) == 0) {
let floatNumber = this.getFloat(index,1)
if (floatNumber <= this.getFloat(data,1)) {
lastNumber = floatNumber
aIndex = a
surplusHeight = this.canavsHeight -this.getFloat(YHeightChilder,1)*a
}
}else{
if (index <= data) {
lastNumber = index
aIndex = a
surplusHeight = this.canavsHeight - YHeightChilder*a
}
}
index = index+i
}
if (lastNumber-data < 0) {
surplusHeight = surplusHeight -YHeightChilder/2
}
return surplusHeight
},
transformY(data,i,cellMin)這個方法里的邏輯比較復雜 后面我們在單獨講
下面是幾個基礎方法
resetY方法也是一個重點后面再講
//獲取X坐標 data當前時間點
getX(data){
let XShareOne = this.XShareOne(data)
return XShareOne
},
//重置y軸坐標間隔條數 傳入日期陣列 格式["1","3","4","5","6","18","21","24"]
resetY(data){
let oneYLinWidth = this.canavsWidth/this.xLineLen.day/this.xLineLen.time //每個時間點格子寬度
let resetArr = [] //得到的新陣列
data.forEach((item,i) => {
if (i == 0) {
for (let index = 0; index < item; index++) {
resetArr.push({
width:oneYLinWidth/2/item
})
}
}else{
let indexItem = item - data[i-1]
for (let index = 0; index < indexItem; index++) {
resetArr.push({
width:oneYLinWidth/indexItem
})
}
if (i+1 == data.length) {
let indexItem = 24 - item
for (let index = 0; index < indexItem; index++) {
resetArr.push({
width:oneYLinWidth/2/indexItem
})
}
}
}
})
return resetArr
},
getFloat(num,n){
n = n ? parseInt(n) : 0;
if(n <= 0) {
return Math.round(num);
}
num = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
num = Number(num).toFixed(n); //補足位數
return num;
},
getCellHeight(){
//yHeight Y軸每個小格子高度 xHeight X軸每個小格子寬度
let xWidth = this.canavsWidth / this.xLineLen.day / this.xLineLen.time
this.$emit('yHeight',this.YShareOne().height)
this.$emit('xHeight',xWidth)
},
hoverLine(){
var timer = null;
let line = new zrender.Line({
shape:{
x1:0,
y1:0,
x2:0,
y2:this.canavsHeight
},
})
this.zr.add(line)
hoverLine(this.zr,line,this.canavsHeight)
}
<template> <div id="main"> </div> </template>
這是創建初始cavans需要用的
<style scoped>
#main{
height: 1250px;
width: 100%;
position: relative;
}
html,body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
canvas{
width: 100%;
height: 700px;
}
</style>
然后是src/js/utli.js里的各個方法
import zrender from "zrender"
import moment from 'moment';
//線段
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
let textWidth = config.tips.length*15
domTips[0].setAttribute("style",`position:absolute;top:${y-30}px;left:${x-textWidth/2}px;display:block;font-size:10px;background-color:rgba(0,0,0,.7);padding:3px 2px;border-radius:2px;color:#fff;width:${textWidth}px;text-align:center`)
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
})
}
export const hoverLine = (el,line,y2) => {
window.onmousemove = function (e) {
line.animateTo({
shape:{
x1:e.offsetX,
y1:0,
x2:e.offsetX,
y2:y2
}
},50,0)
}
}
//時間格式化
export const getFullTime = (i) => {
return moment(i).format("YYYY-MM-DD HH:mm:ss");
}
//貝塞爾曲線
export const BezierCurve = (x1,y1,x2,y2,cpx1,cpy1,style) => {
return new zrender.BezierCurve({
shape:{
x1:x1,
y1:y1,
x2:x2,
y2:y2,
cpx1:cpx1,
cpy1:cpy1
},
style:style,
});
}
這里創建完成后畫板區域基本完成加上資料就能看見效果了
關注公眾號回復 體溫單 獲取源代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/28119.html
標籤：JavaScript