<canvas type="2d" id="columnar" style="width: 710rpx; height: 366rpx;"></canvas>
Page({
data: {
countForQuarterList:[],
maxNuber:''
},
onLoad: function (options) {
let countForQuarterList = [[0, 0, 0, 0], [0, 1, 0, 0]];
let arryzhi = [...countForQuarterList[0], ...countForQuarterList[1]]
let maxNuber = Math.max(...arryzhi)
this.setData({
countForQuarterList,
maxNuber
})
wx.createSelectorQuery()
.select('#columnar')
.fields({
node: true,
size: true,
})
.exec(this.init.bind(this))
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
},
init(useElectricity) {
const width = useElectricity[0].width
const height = useElectricity[0].height
const canvas = useElectricity[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio;
const unit = wx.getSystemInfoSync().windowWidth / 375;
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
ctx.translate(0, 160 * unit);
let xxx = [78.125, 154.375, 230.625, 306.875]
let yyy = [0]
let dataList = this.data.countForQuarterList[0]
let dataList2 = this.data.countForQuarterList[1]
if(dataList2.length<4){
for(let a=dataList2.length;a<4;a++){
dataList2[a]=0
}
}
let max = this.data.maxNuber
for (let i = 1; i < 6; i++) {
yyy.push(((max / 5) * i).toFixed(2))
}
let dataListPoint = [];
let dataListPoint2 = [];
for (let j = 0; j < dataList.length; j++) {
dataListPoint.push(dataList[j] * 150 / max)
}
for (let z = 0; z < dataList2.length; z++) {
dataListPoint2.push(dataList2[z] * 150 / max)
}
ctx.beginPath();
ctx.moveTo(xxx[0] * unit, 0 * unit);
ctx.lineTo(xxx[0] * unit, -dataListPoint[0] * unit);
ctx.bezierCurveTo((xxx[0] + 50) * unit, -dataListPoint[0] * unit, (xxx[1] - 50) * unit, -dataListPoint[1] * unit, xxx[1] * unit, -dataListPoint[1] * unit);
for (let m = 1; m < 3; m++) {
ctx.bezierCurveTo((xxx[m] + 50) * unit, -dataListPoint[m] * unit, (xxx[m + 1] - 50) * unit, -dataListPoint[m + 1] * unit, xxx[m + 1] * unit, -dataListPoint[m + 1] * unit);
}
ctx.lineTo(xxx[3] * unit, 0 * unit);
ctx.lineTo(xxx[0] * unit, 0 * unit);
ctx.closePath();
let grd = ctx.createLinearGradient(0, 0, 0, -150);
grd.addColorStop(0, "#FFFFFF");
grd.addColorStop(1, "#516FEA");
ctx.fillStyle = grd;
ctx.fill()
ctx.beginPath();
ctx.moveTo(xxx[0] * unit, 0 * unit);
ctx.lineTo(xxx[0] * unit, -dataListPoint2[0] * unit);
ctx.bezierCurveTo((xxx[0] + 50) * unit, -dataListPoint2[0] * unit, (xxx[1] - 50) * unit, -dataListPoint2[1] * unit, xxx[1] * unit, -dataListPoint2[1] * unit);
for (let m = 1; m < 3; m++) {
ctx.bezierCurveTo((xxx[m] + 50) * unit, -dataListPoint2[m] * unit, (xxx[m + 1] - 50) * unit, -dataListPoint2[m + 1] * unit, xxx[m + 1] * unit, -dataListPoint2[m + 1] * unit);
}
ctx.lineTo(xxx[3] * unit, 0 * unit);
ctx.closePath();
let grd2 = ctx.createLinearGradient(0, 0, 0, -150);
grd2.addColorStop(0, "#FFFFFF");
grd2.addColorStop(1, "#D851EA");
ctx.fillStyle = grd2;
ctx.fill()
ctx.beginPath();
ctx.moveTo(xxx[0] * unit, -dataListPoint[0] * unit);
ctx.bezierCurveTo((xxx[0] + 50) * unit, -dataListPoint[0] * unit, (xxx[1] - 50) * unit, -dataListPoint[1] * unit, xxx[1] * unit, -dataListPoint[1] * unit);
ctx.strokeStyle = '#FFFFFF'
ctx.stroke()
for (let k = 1; k < 3; k++) {
ctx.bezierCurveTo((xxx[k] + 50) * unit, -dataListPoint[k] * unit, (xxx[k + 1] - 50) * unit, -dataListPoint[k + 1] * unit, xxx[k + 1] * unit, -dataListPoint[k + 1] * unit);
}
ctx.lineWidth = 2
ctx.strokeStyle = '#444FF5'
ctx.stroke()
ctx.beginPath();
ctx.moveTo(xxx[0] * unit, -dataListPoint2[0] * unit);
ctx.bezierCurveTo((xxx[0] + 50) * unit, -dataListPoint2[0] * unit, (xxx[1] - 50) * unit, -dataListPoint2[1] * unit, xxx[1] * unit, -dataListPoint2[1] * unit);
ctx.strokeStyle = '#FFFFFF';
for (let k = 1; k < 3; k++) {
ctx.bezierCurveTo((xxx[k] + 50) * unit, -dataListPoint2[k] * unit, (xxx[k + 1] - 50) * unit, -dataListPoint2[k + 1] * unit, xxx[k + 1] * unit, -dataListPoint2[k + 1] * unit);
}
ctx.lineWidth = 2
ctx.strokeStyle = '#EE51F5'
ctx.stroke()
ctx.lineWidth = 1
ctx.beginPath();
ctx.moveTo(40 * unit, 0);
ctx.lineTo(345 * unit, 0);
ctx.moveTo(40 * unit, 0);
ctx.lineTo(40 * unit, 5 * unit);
ctx.moveTo(116.25 * unit, 0);
ctx.lineTo(116.25 * unit, 5 * unit);
ctx.moveTo(192.5 * unit, 0);
ctx.lineTo(192.5 * unit, 5 * unit);
ctx.moveTo(268.75 * unit, 0);
ctx.lineTo(268.75 * unit, 5 * unit);
ctx.moveTo(345 * unit, 0);
ctx.lineTo(345 * unit, 5 * unit);
ctx.strokeStyle = '#9B9B9B'
ctx.stroke()
ctx.fillStyle = "#9B9B9B";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(`1季度`, 78.125 * unit, 16 * unit);
ctx.fillText(`2季度`, 154.375 * unit, 16 * unit);
ctx.fillText(`3季度`, 230.625 * unit, 16 * unit);
ctx.fillText(`4季度`, 306.875 * unit, 16 * unit);
ctx.textAlign = "right";
ctx.textBaseline = "middle";
ctx.fillText(`${yyy[0]}`, 30 * unit, 0 * unit);
ctx.fillText(`${yyy[1]}`, 30 * unit, -30 * unit);
ctx.fillText(`${yyy[2]}`, 30 * unit, -60 * unit);
ctx.fillText(`${yyy[3]}`, 30 * unit, -90 * unit);
ctx.fillText(`${yyy[4]}`, 30 * unit, -120 * unit);
ctx.fillText(`${yyy[5]}`, 30 * unit, -150 * unit);
},
})