Today we draw a line chart renderings
The following is the analog data
[{"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}]
First create filterData method for filtering data text text area round tag line segments being less than said today that it is to create a polyline method 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; } }); }
We add a folder to create a folder utli.js this effect we create a common way to create a circle line to write in this js file
utli.js Let's say createLine createCircle
Vertical and horizontal transfer createLine style requires five parameters respectively as the starting point of the horizontal and vertical coordinates of the end point of the line as well as
createCircle requires four parameters are passed dot horizontal and vertical coordinates and radius of the circle pattern
addHover need when we need to add a piece of code (initialization method created in the previous chapter) in the init method in this code for the text message will pop up on our mouse over the circle when you create a div used to back when
var div = document.createElement("div") div.classList.add("tips") document.getElementById("main").append(div)
utli.js
// line Export CreateLine const = (X1, Y1, X2, Y2, style) => { return new new zrender.Line ({ Shape: { X1: X1, Y1: Y1, X2: X2, Y2: Y2 }, style: style, }); }; // CX abscissa ordinate radius r cy open circles Export createCircle const = (CX, cy, r, style) => { return new new zrender.Circle ({ Shape: { CX: CX, cy : CY, R & lt: R & lt }, style: style, zlevel: . 4 }) } // add event el horver config element object of some configuration items xx yy axis coordinate axis coordinate shapeOn the mouse into the mouse out of some property configuration shapeOn shape configuration item attributes Tell me what network configuration 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 method in the first code to determine the inflection point is this broken line open circle or a filled circle or other shape by shape decisions are needed color for the border color of the fill color to white circle to define a style to implement custom variable good time
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; }
We should add two methods
getX
// Get the current time point X-coordinate data getX (data) { the let XShareOne = the this .XShareOne () return data * XShareOne },
transformY
// convert the y-axis coordinate point to the correct coordinates of the point as the y-axis coordinates of the vertices are all highly 0 increasing the total height minus the height of the original coordinates and the rest is correct coordinates of the point // i represents a grid on behalf of several highly transformY (Data, I) { the let YHeight = the this .YShareOne () // calculate the remaining height of the let surplusHeight = the this .canavsHeight - (YHeight / I) * Data return surplusHeight },
This code means that the first data is calculated out of the left traverse the y-coordinate axis x substantially is substantially y-axis coordinate is time to calculate the data may change with change in property Break calculated x-coordinate value by the time attribute value If you need to break if the break in place 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, }) })
This step should be to complete the line chart to draw good
The next time we talk about the shadow of painting 