微信小程序cavas画折线图

drawCircle: function(e) {

var thisObj = this;

radCtx.save();

radCtx.setFontSize(14) //字体大小

radCtx.setFillStyle('#ff0000') //字体颜色

radCtx.setStrokeStyle("#6797F4")

radCtx.setLineWidth(3) //设置线宽

// radCtx.setShadow(100, -100, -10, 'blue')

lineCtx.save();

lineCtx.setFillStyle("#6797F4")

lineCtx.setLineWidth(1) //设置线宽

 

var att = this.data.dayMoneyList;

console.log(att)

for (var i = 0; i < att.length; i++) {

radCtx.beginPath();

lineCtx.beginPath();

var attObj = att[i];

var attObj1 = att[i - 1];

var space = mW / att.length * 0.5

//坐标

var x = mW / att.length * (i + 1) - space;

var y = thisObj.data.dayProgressHeight - attObj.height;

if (i == 0) {

var x1 = x;

var y1 = y;

} else {

var x1 = mW / (att.length) * (i) - space;

var y1 = thisObj.data.dayProgressHeight - attObj1.height;

}

if (y == 0) {

y = 10

}

if (y1 == 0) {

y1 = 10

}

if (e == i) {

if (e == 0) {

radCtx.moveTo(x1, y1) //起点 x轴起点，y轴起点

radCtx.lineTo(x, y) //终点

} else {

radCtx.moveTo(x1, y1) //起点 x轴起点，y轴起点

radCtx.lineTo(x - thisObj.data.circleRadius, y + thisObj.data.circleRadius / 2) //终点

}

 

} else if (e == (i - 1)) {

radCtx.moveTo(x1 + thisObj.data.circleRadius, y1 + thisObj.data.circleRadius / 2) //起点 x轴起点，y轴起点

radCtx.lineTo(x, y)

} else {

radCtx.moveTo(x1, y1) //起点 x轴起点，y轴起点

radCtx.lineTo(x, y) //终点

}

 

radCtx.closePath()

radCtx.stroke()

if (e == i) {

radCtx.beginPath();

radCtx.arc(x, y, thisObj.data.circleRadius, 0, 2 * Math.PI)

radCtx.closePath()

radCtx.stroke()

}

}

radCtx.restore();

radCtx.draw();

 

},