微信小程序中实现趋势（折线）面积组合图

一、小程序中实现面积图的绘制使用canvas进行绘制渲染从左到右的渲染动画二、面积图封装组件【完整代码】Component({properties:{title:{type: String, value:}, chartData:{type: Object, value:{xAxis:[], yAxis:[], values:[]}}}, data:{canvas: null, ctx: null, canvasWidth:0, canvasHeight:0, dpr:1, // 所有尺寸单位都是rpx改这里就生效 styles:{yEmojiSize:42, // Y轴表情大小 xTextSize:32, // X轴文字大小 lineWidth:4, // 折线粗细 pointRadius:8// 圆点大小}, // 调整边距解决重叠和截断问题 padding:{top:15, right:40, // 加大右边距解决第4周被截断 bottom:95, // 距离底部的间距 left:120// 图表-距离左边的间距}, points:[], animationProgress:0, showBubble: false, bubbleData:{}, bubbleLeft:0, bubbleTop:0, bubbleArrowDir:}, _animationTimer: null, _initTimer: null, _isDestroyed: false, _rpxToPx:1, lifetimes:{ready(){this._isDestroyedfalseconst systemInfowx.getSystemInfoSync()this._rpxToPxsystemInfo.windowWidth /750setTimeout((){ this._safeInitChart()},100)},detached(){ this._isDestroyedtrue if(this._animationTimer){ clearTimeout(this._animationTimer)this._animationTimernull } if(this._initTimer){ clearTimeout(this._initTimer)this._initTimernull } if(this.data.ctx){ this.data.ctx.clearRect(0,0,this.data.canvasWidth,this.data.canvasHeight)} this.setData({ canvas:null,ctx:null,points:[],showBubble:false })} },//修复监听所有配置项的变化自动刷新图表 observers:{ chartData,styles,padding:function(){ if(this._initTimer){ clearTimeout(this._initTimer)} this._initTimersetTimeout((){ this._safeInitChart()},50)} },methods:{ async _safeInitChart(retryCount0){ if(this._isDestroyed)return if(this._animationTimer){ clearTimeout(this._animationTimer)this._animationTimernull } try { const querywx.createSelectorQuery().in(this)const resawait new Promise((resolve){ query.select(#emotionChart).fields({ node:true,size:true }).exec(resolve)})if(!res||!res[0]||!res[0].node){ if(retryCount3){ setTimeout((){ this._safeInitChart(retryCount1)},100)} return } const canvasres[0].node const ctxcanvas.getContext(2d)const dprwx.getSystemInfoSync().pixelRatio const canvasWidthres[0].width const canvasHeightres[0].height canvas.widthcanvasWidth*dpr canvas.heightcanvasHeight*dpr ctx.scale(dpr,dpr)this.setData({ canvas,ctx,canvasWidth,canvasHeight,dpr,animationProgress:0,showBubble:false })this.calculatePoints()this.startAnimation()} catch(err){ console.error(emotion-chart:初始化异常,err)if(retryCount3){ setTimeout((){ this._safeInitChart(retryCount1)},100)} } },calculatePoints(){ const { chartData,padding,canvasWidth,canvasHeight }this.data const { xAxis,yAxis,values }chartData const paddingLeftpadding.left*this._rpxToPx const paddingRightpadding.right*this._rpxToPx const paddingToppadding.top*this._rpxToPx const paddingBottompadding.bottom*this._rpxToPx const chartWidthcanvasWidth-paddingLeft-paddingRight const chartHeightcanvasHeight-paddingTop-paddingBottom const xCountxAxis.length const xStepchartWidth/(xCount-1)const yCountyAxis.length const yStepchartHeight/(yCount-1)const pointsvalues.map((value,index)({ x:paddingLeftindex*xStep,y:paddingTop(yCount-1-value)*yStep,xLabel:xAxis[index],yEmoji:yAxis[value].emoji,yLabel:yAxis[value].label }))this.setData({points})},startAnimation(){if(this._isDestroyed)returnconst animate(){if(this._isDestroyed)returnletnewProgressthis.data.animationProgress 1/30if(newProgress1)newProgress1this.setData({animationProgress: newProgress})this.drawChart()if(newProgress1){this._animationTimersetTimeout(animate,33)}else{this._animationTimernull}}animate()},drawChart(){if(this._isDestroyed||!this.data.ctx)returnconst{ctx, canvasWidth, canvasHeight, padding, points, animationProgress, styles}this.data const paddingLeftpadding.left * this._rpxToPx const paddingRightpadding.right * this._rpxToPx const paddingToppadding.top * this._rpxToPx const paddingBottompadding.bottom * this._rpxToPx ctx.clearRect(0,0, canvasWidth, canvasHeight)const chartWidthcanvasWidth - paddingLeft - paddingRight const chartHeightcanvasHeight - paddingTop - paddingBottom this.drawGrid(ctx, paddingLeft, paddingTop, chartWidth, chartHeight)this.drawYAxis(ctx, paddingLeft, paddingTop, chartHeight)this.drawXAxis(ctx, paddingLeft, paddingTop, chartWidth, chartHeight)const currentPointCountMath.ceil(points.length * animationProgress)if(currentPointCount1)returnconst currentPointspoints.slice(0, currentPointCount)this.drawCurve(ctx, paddingLeft, paddingTop, chartWidth, chartHeight, currentPoints)this.drawPoints(ctx, currentPoints)}, drawGrid(ctx, paddingLeft, paddingTop, chartWidth, chartHeight){const{chartData}this.data const yCountchartData.yAxis.length const yStepchartHeight /(yCount -1)ctx.strokeStyle#cbd5e1ctx.lineWidth1ctx.setLineDash([6,6])for(let i0;iyCount;i){const ypaddingTop i * yStep ctx.beginPath()ctx.moveTo(paddingLeft, y)ctx.lineTo(paddingLeft chartWidth, y)ctx.stroke()}ctx.setLineDash([])}, drawYAxis(ctx, paddingLeft, paddingTop, chartHeight){const{chartData, styles}this.data const yAxischartData.yAxis const yCountyAxis.length const yStepchartHeight /(yCount -1)ctx.font${styles.yEmojiSize * this._rpxToPx}px sans-serifctx.textAligncenterctx.textBaselinemiddlectx.fillStyle#64748bfor(let i0;iyCount;i){const ypaddingTop i * yStep // 表情位置微调进一步加大和虚线的间距 ctx.fillText(yAxis[yCount -1- i].emoji, paddingLeft *0.3, y)}}, drawXAxis(ctx, paddingLeft, paddingTop, chartWidth, chartHeight){const{chartData, styles}this.data const xAxischartData.xAxis const xCountxAxis.length const xStepchartWidth /(xCount -1)ctx.font${styles.xTextSize * this._rpxToPx}px sans-serifctx.textAligncenterctx.textBaselinetopctx.fillStyle#64748bfor(let i0;ixCount;i){const xpaddingLeft i * xStep ctx.fillText(xAxis[i], x, paddingTop chartHeight 10* this._rpxToPx)}}, drawCurve(ctx, paddingLeft, paddingTop, chartWidth, chartHeight, currentPoints){const{styles}this.data const gradientctx.createLinearGradient(0, paddingTop,0, paddingTop chartHeight)gradient.addColorStop(0,rgba(59, 130, 246, 0.2))gradient.addColorStop(1,rgba(59, 130, 246, 0.05))ctx.beginPath()ctx.moveTo(currentPoints[0].x, paddingTop chartHeight)ctx.lineTo(currentPoints[0].x, currentPoints[0].y)for(let i0;icurrentPoints.length -1;i){const x1currentPoints[i].x const y1currentPoints[i].y const x2currentPoints[i 1].x const y2currentPoints[i 1].y const cpX(x1 x2)/2ctx.bezierCurveTo(cpX, y1, cpX, y2, x2, y2)}ctx.lineTo(currentPoints[currentPoints.length -1].x, paddingTop chartHeight)ctx.closePath()ctx.fillStylegradient ctx.fill()ctx.beginPath()ctx.moveTo(currentPoints[0].x, currentPoints[0].y)for(let i0;icurrentPoints.length -1;i){const x1currentPoints[i].x const y1currentPoints[i].y const x2currentPoints[i 1].x const y2currentPoints[i 1].y const cpX(x1 x2)/2ctx.bezierCurveTo(cpX, y1, cpX, y2, x2, y2)}ctx.strokeStyle#3b82f6ctx.lineWidthstyles.lineWidth * this._rpxToPx ctx.lineCaproundctx.lineJoinroundctx.stroke()}, drawPoints(ctx, currentPoints){const{styles}this.data const pointRadiusstyles.pointRadius * this._rpxToPx currentPoints.forEach(point{ctx.beginPath()ctx.arc(point.x, point.y, pointRadius,0, Math.PI *2)ctx.fillStyle#3b82f6ctx.fill()ctx.strokeStyle#fffctx.lineWidth2* this._rpxToPx ctx.stroke()})}, handleCanvasTouch(e){if(this._isDestroyed||!this.data.points.length)returnconst{points, canvasWidth, canvasHeight, padding}this.data consttouche.touches[0]const querywx.createSelectorQuery().in(this)query.select(#emotionChart).boundingClientRect(rect{if(!rect||this._isDestroyed)returnconst touchX(touch.clientX - rect.left)*(canvasWidth / rect.width)const touchY(touch.clientY - rect.top)*(canvasHeight / rect.height)letnearestPointnullletminDistance30* this._rpxToPx points.forEach(point{const distanceMath.sqrt(Math.pow(touchX - point.x,2) Math.pow(touchY - point.y,2))if(distanceminDistance){minDistancedistance nearestPointpoint}})if(nearestPoint){this.showBubbleCard(nearestPoint, rect)}else{this.setData({showBubble:false})}}).exec()}, showBubbleCard(point, rect){if(this._isDestroyed)returnconst systemInfowx.getSystemInfoSync()const pxToRpx750/ systemInfo.windowWidth const pointCenterX(point.x *(rect.width / this.data.canvasWidth) rect.left)* pxToRpx const pointCenterY(point.y *(rect.height / this.data.canvasHeight) rect.top)* pxToRpx const bubbleWidth200const bubbleHeight120const arrowHeight12const arrowTipOffset0letbubbleLeftpointCenterX - bubbleWidth /2letbubbleToppointCenterY - bubbleHeight - arrowHeight arrowTipOffsetletbubbleArrowDirif(bubbleLeft20)bubbleLeft20if(bubbleLeft bubbleWidth730)bubbleLeft730- bubbleWidthif(bubbleTop20){bubbleToppointCenterY arrowHeight arrowTipOffset bubbleArrowDirtop}this.setData({showBubble: true, bubbleData:{x: point.xLabel, yEmoji: point.yEmoji, yLabel: point.yLabel}, bubbleLeft, bubbleTop, bubbleArrowDir})},refreshData(){this._safeInitChart()}}})viewclassemotion-chart-wrapper!-- 图表标题可选父组件不传则不显示 --viewclasschart-titlewx:if{{title}}{{title}}/view!-- Canvas绘图区域 --canvastype2didemotionChartclasschart-canvasbindtouchstarthandleCanvasTouch/!-- 点击数据点弹出的气泡详情主流样式 --viewclassbubble-cardwx:if{{showBubble}}styleleft: {{bubbleLeft}}rpx; top: {{bubbleTop}}rpx;!-- 气泡箭头自动调整方向 --viewclassbubble-arrow {{bubbleArrowDir}}/view!-- 气泡内容 --viewclassbubble-contentviewclassbubble-x{{bubbleData.x}}/viewviewclassbubble-ytextclassbubble-emoji{{bubbleData.yEmoji}}/texttextclassbubble-label{{bubbleData.yLabel}}/text/view/view/view/view.emotion-chart-wrapper{width:100%;position: relative;background-color:#fff;}/* 图表标题 */ .chart-title{font-size: 48rpx;font-weight: bold;color:#1e293b;margin-bottom: 40rpx;padding-left: 20rpx;}/* Canvas绘图区域 */ .chart-canvas{width:100%;height: 600rpx;}/* 气泡详情卡片主流圆角阴影样式 */ .bubble-card{position: absolute;z-index:999;background-color:#fff;border-radius: 16rpx;box-shadow:08rpx 24rpx rgba(0,0,0,0.12);padding: 24rpx 32rpx;min-width: 160rpx;max-width: 300rpx;}/* 气泡箭头自动调整方向 */ .bubble-arrow{position: absolute;width:0;height:0;border-left: 12rpx solid transparent;border-right: 12rpx solid transparent;border-top: 12rpx solid#fff;left:50%;transform: translateX(-50%);bottom: -12rpx;}/* 箭头在上方的情况数据点在顶部时 */ .bubble-arrow.top{border-top: none;border-bottom: 12rpx solid#fff;top: -12rpx;bottom: auto;}/* 气泡内容 */ .bubble-content{text-align: center;}.bubble-x{font-size: 28rpx;color:#64748b;margin-bottom: 12rpx;}.bubble-y{display: flex;align-items: center;justify-content: center;gap: 12rpx;}.bubble-emoji{font-size: 40rpx;}.bubble-label{font-size: 32rpx;font-weight: bold;color:#1e293b;}三、父组件中引入组件并传递数据{navigationStyle:custom,usingComponents:{emotion-chart:/components/emotion-chart/emotion-chart}}viewclasscontainer!-- 使用情绪趋势波动图组件 --emotion-chartidmyEmotionCharttitle情绪趋势波动图chart-data{{chartData}}/!-- 刷新数据按钮可选 --buttonbindtaprefreshChartDataclassrefresh-btn mt-40刷新数据/button/viewPage({data:{// 图表数据Y轴现在支持配置emoji和文字标签 chartData:{xAxis:[第1周,第2周,第3周,第4周], yAxis:[{emoji:, label:低落},{emoji:, label:平静},{emoji:, label:开心},{emoji:, label:兴奋},{emoji:, label:狂喜}], values:[1,2,4,4]}}, // 刷新数据按钮点击事件refreshChartData(){// 生成随机数据模拟刷新 const newValues[]for(let i0;i4;i){newValues.push(Math.floor(Math.random()*5))}// 更新数据 this.setData({chartData.values:newValues})// 也可以调用组件的refreshData方法可选因为observer会自动监听数据变化 // this.selectComponent(#myEmotionChart).refreshData()}}).container{padding: 40rpx 20rpx;background-color:#f8fafc;min-height: 100vh;}.mt-40{margin-top: 40rpx;}.refresh-btn{background-color:#3b82f6;color:#fff;border-radius: 16rpx;font-size: 32rpx;padding: 20rpx 40rpx;}