Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | /**
* @description 折线图绘制
* @author SoldierAb
* @param {Object} cx 画布实例
* @param {Array} renderData 绘制数据
* @param {Number} cxH 画布高度
* @param {Number} cxW 画布宽度
* @param {Number} lineWidth 线条宽度
* @param {String} strokeStyle 线条颜色
* @param {String} backgroundStyle 背景颜色
* @param {String} fillStyle 填充颜色
* @param {Number} splitLen 分割份数
* @example
* const lineInstance=new lineChartUtil(ParamObj);
* lineInstance.render();
*/
class lineChartUtil{
constructor({cx,renderData,cxH,cxW,lineWidth,strokeStyle,backgroundStyle,fillStyle,splitLen}){
this.cx=cx;
this.cxH=cxH;
this.cxW=cxW;
this.splitLen=splitLen;
this.lineWidth=lineWidth;
this.fillStyle=fillStyle;
this.strokeStyle=strokeStyle;
this.backgroundStyle=backgroundStyle;
this.renderData=renderData;
// console.log(this.renderData);
}
render(){
let {cx,lineWidth,strokeStyle,renderData,cxH,cxW,backgroundStyle,splitLen,fillStyle}=this;
this.clear();
if(!renderData) throw new Error('renderData is required!');
//面板背景绘制
if(backgroundStyle) this.drawBg(cx,[0,0],cxW,cxH,backgroundStyle);
//坐标轴绘制
if(splitLen){
for(let i=1;i<splitLen;i++){
this.drawLine(cx,[0,i*cxH/splitLen],[cxW,i*cxH/splitLen - 2],0.2,strokeStyle);
}
}
//过程线绘制
for(let i=0;i<renderData.length-1;i++){
this.drawLine(cx,renderData[i],renderData[i+1],lineWidth,strokeStyle);
}
//折线填充颜色
if(fillStyle) this.fillBg(cx,[0,cxH],[cxW,cxH],renderData,fillStyle,strokeStyle,lineWidth);
}
clear(){
let {cx,cxW,cxH}=this;
cx&&cx.clearRect(0,0,cxW,cxH);
}
fillBg(cx,startPos,endPos,renderData,fillStyle){
cx.fillStyle=fillStyle;
cx.beginPath();
cx.moveTo(...startPos);
for(let i=0;i<renderData.length;i++){
cx.lineTo(...renderData[i]);
}
cx.lineTo(...endPos);
cx.closePath();
cx.fill();
cx.save();
}
drawLine(cx,startPos,endPos,lineWidth,strokeStyle){
cx.lineWidth=lineWidth;
cx.strokeStyle=strokeStyle;
cx.beginPath();
cx.moveTo(...startPos);
cx.lineTo(...endPos);
cx.stroke();
cx.closePath();
cx.save();
}
drawBg(cx,startPos,cxW,cxH,fillStyle){
cx.fillStyle=fillStyle;
cx.beginPath();
cx.moveTo(...startPos);
cx.rect(...startPos,cxW,cxH);
cx.fill();
cx.closePath();
cx.save();
}
resize(){
let {cx,cxH,cxW}=this;
cx.clearRect(0,0,cxW,cxH);
this.render();
}
}
export default lineChartUtil;
|