微信小程序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();
},