从静态到动效用uni-appCanvas实现数据驱动的环形图动画附完整代码在移动应用开发中数据可视化是提升用户体验的关键环节。一个精心设计的环形图动画能够将枯燥的数字转化为直观的视觉反馈让用户一眼就能理解数据背后的含义。本文将带你深入探索如何在uni-app框架下利用Canvas实现一个数据驱动的环形图动画效果。1. 环形图动画的核心原理环形图动画的本质是将数据变化映射为视觉变化。我们需要解决三个核心问题数据到角度的转换将百分比数据转换为圆弧的结束角度动画平滑过渡使用定时器实现角度值的渐进变化视觉效果优化通过图层叠加和样式调整提升视觉体验1.1 数学基础极坐标与Canvas绘图Canvas的arc()方法是绘制圆弧的核心它接受以下参数ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)其中角度使用弧度制完整的圆是2π弧度。数据转换公式为endAngle (percentage / 100) * 2 * Math.PI1.2 动画实现方案对比方案优点缺点适用场景setInterval兼容性好实现简单帧率不稳定可能丢帧简单动画兼容性要求高requestAnimationFrame与浏览器刷新同步性能好需要手动控制帧率流畅动画现代浏览器CSS动画性能最佳实现简单控制粒度较粗简单过渡效果在uni-app中我们推荐使用requestAnimationFrame的变体uni.requestAnimationFrame来实现最流畅的动画效果。2. 基础环形图实现让我们从最基本的环形图开始逐步添加动画效果。2.1 Canvas基础设置首先在模板中定义Canvas元素canvas canvas-idprogressCanvas stylewidth: 300px; height: 300px /canvas然后在Vue的mounted钩子中初始化绘图上下文mounted() { this.ctx uni.createCanvasContext(progressCanvas, this) this.drawStaticRing() }2.2 绘制静态环形图基础环形图由两部分组成背景环和前景环。背景环表示最大值前景环表示当前值。drawStaticRing() { const centerX 150 // 圆心x坐标 const centerY 150 // 圆心y坐标 const radius 80 // 圆半径 const lineWidth 12 // 环宽度 // 绘制背景环 this.ctx.beginPath() this.ctx.setLineWidth(lineWidth) this.ctx.setStrokeStyle(#f2f2f2) this.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI) this.ctx.stroke() // 绘制前景环 const progress 65 // 示例数据65% const endAngle (progress / 100) * 2 * Math.PI this.ctx.beginPath() this.ctx.setLineWidth(lineWidth) this.ctx.setStrokeStyle(#0079fe) this.ctx.setLineCap(round) // 圆角端点 this.ctx.arc(centerX, centerY, radius, 0, endAngle) this.ctx.stroke() this.ctx.draw() }3. 添加动画效果静态环形图已经能够展示数据但添加动画后体验会大幅提升。3.1 动画核心逻辑我们使用requestAnimationFrame实现平滑动画animateRing(targetProgress) { const duration 1000 // 动画持续时间(ms) const startTime Date.now() const startProgress this.currentProgress const animate () { const elapsed Date.now() - startTime const progress Math.min(elapsed / duration, 1) // 使用缓动函数使动画更自然 this.currentProgress this.easeOutQuad(progress) * (targetProgress - startProgress) startProgress this.drawRing(this.currentProgress) if (progress 1) { this.animationId uni.requestAnimationFrame(animate) } } animate() } // 二次缓动函数 easeOutQuad(t) { return t * (2 - t) } drawRing(progress) { // 清空画布 this.ctx.clearRect(0, 0, 300, 300) // 绘制背景环(同上) // ... // 绘制动画前景环 const endAngle (progress / 100) * 2 * Math.PI this.ctx.beginPath() this.ctx.arc(centerX, centerY, radius, 0, endAngle) this.ctx.stroke() // 绘制中心文本 this.ctx.setFontSize(24) this.ctx.setFillStyle(#333) this.ctx.setTextAlign(center) this.ctx.fillText(${Math.round(progress)}%, centerX, centerY 8) this.ctx.draw() }3.2 性能优化技巧避免频繁创建渐变对象在动画开始前创建好渐变对象合理使用clearRect只清除需要重绘的区域减少不必要的绘制将静态元素分层绘制// 优化后的渐变处理 initGradient() { const gradient this.ctx.createLinearGradient(0, 0, 300, 0) gradient.addColorStop(0, #00F2FE) gradient.addColorStop(1, #4FACFE) this.gradient gradient }4. 高级效果实现基础动画已经完成现在添加一些提升视觉效果的高级特性。4.1 渐变色彩环形图使用Canvas的线性渐变功能创建更生动的视觉效果drawGradientRing(progress) { const endAngle (progress / 100) * 2 * Math.PI - Math.PI/2 this.ctx.beginPath() this.ctx.setLineWidth(12) this.ctx.setStrokeStyle(this.gradient) this.ctx.setLineCap(round) this.ctx.arc(centerX, centerY, radius, -Math.PI/2, endAngle) this.ctx.stroke() }4.2 多层叠加效果通过多个Canvas叠加实现更复杂的视觉效果view classchart-container canvas canvas-idbgLayer classcanvas-layer/canvas canvas canvas-idprogressLayer classcanvas-layer/canvas canvas canvas-idmarkerLayer classcanvas-layer/canvas view classcenter-text{{ progress }}%/view /view对应的样式.chart-container { position: relative; width: 300px; height: 300px; } .canvas-layer { position: absolute; width: 100%; height: 100%; } .center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #333; }4.3 刻度标记实现在单独的Canvas层上绘制刻度标记drawMarkers() { const ctx uni.createCanvasContext(markerLayer, this) const centerX 150 const centerY 150 const radius 80 // 每15度绘制一个刻度 for (let i 0; i 360; i 15) { const angle (i - 90) * Math.PI / 180 // 转换为弧度并调整起始位置 ctx.beginPath() ctx.setLineWidth(2) ctx.setStrokeStyle(#ccc) const x1 centerX (radius - 10) * Math.cos(angle) const y1 centerY (radius - 10) * Math.sin(angle) const x2 centerX radius * Math.cos(angle) const y2 centerY radius * Math.sin(angle) ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.stroke() } ctx.draw() }5. 数据驱动实现真正的数据驱动意味着图表能够响应数据变化并自动更新。5.1 响应式数据绑定在Vue组件中定义响应式数据export default { data() { return { progress: 0, // 当前进度值 targetProgress: 75 // 目标进度值 } }, watch: { targetProgress(newVal) { this.animateRing(newVal) } } }5.2 动态数据更新示例模拟从API获取数据并更新图表fetchProgressData() { // 模拟API请求 setTimeout(() { const newProgress Math.floor(Math.random() * 100) this.targetProgress newProgress }, 2000) }5.3 完整组件实现将环形图封装为可复用的Vue组件template view classprogress-chart canvas canvas-idprogressCanvas :style{width: size px, height: size px} /canvas view classcenter-text slot{{ progress }}%/slot /view /view /template script export default { props: { value: { type: Number, default: 0 }, size: { type: Number, default: 200 }, lineWidth: { type: Number, default: 12 }, colors: { type: Array, default: () [#00F2FE, #4FACFE] } }, data() { return { currentProgress: 0, ctx: null, gradient: null } }, mounted() { this.initCanvas() this.animateRing(this.value) }, methods: { initCanvas() { this.ctx uni.createCanvasContext(progressCanvas, this) this.initGradient() }, initGradient() { const gradient this.ctx.createLinearGradient(0, 0, this.size, 0) gradient.addColorStop(0, this.colors[0]) gradient.addColorStop(1, this.colors[1]) this.gradient gradient }, // 动画方法(同上) // 绘制方法(同上) }, watch: { value(newVal) { this.animateRing(newVal) } } } /script style .progress-chart { position: relative; display: inline-flex; align-items: center; justify-content: center; } .center-text { position: absolute; font-size: 24px; color: #333; } /style6. 实战案例学习进度展示让我们将这些技术应用到一个真实场景中——学习进度展示系统。6.1 场景需求分析展示用户课程完成百分比根据学习进度变化自动更新图表添加交互效果提升用户体验6.2 实现代码template view classlearning-progress progress-chart :valuecompletionRate :colors[#FF9A9E, #FAD0C4] size250 view classprogress-info text classpercentage{{ completionRate }}%/text text classlabel课程完成率/text /view /progress-chart button clicksimulateLearning继续学习/button /view /template script import ProgressChart from /components/progress-chart.vue export default { components: { ProgressChart }, data() { return { completionRate: 30 } }, methods: { simulateLearning() { // 模拟学习进度增加 const increment Math.floor(Math.random() * 10) 5 this.completionRate Math.min(this.completionRate increment, 100) } } } /script style .learning-progress { display: flex; flex-direction: column; align-items: center; padding: 20px; } .progress-info { display: flex; flex-direction: column; align-items: center; } .percentage { font-size: 32px; font-weight: bold; color: #333; } .label { font-size: 14px; color: #666; margin-top: 5px; } button { margin-top: 20px; background-color: #FF9A9E; color: white; border: none; padding: 10px 20px; border-radius: 20px; } /style6.3 性能优化实践使用离屏Canvas预渲染静态元素减少重绘区域使用clip()限制绘制范围合理使用transform减少计算量// 离屏Canvas示例 createOffscreenCanvas() { const offscreenCtx uni.createCanvasContext(offscreen, this) // 绘制静态背景 offscreenCtx.beginPath() offscreenCtx.arc(125, 125, 80, 0, 2 * Math.PI) offscreenCtx.setStrokeStyle(#f2f2f2) offscreenCtx.setLineWidth(12) offscreenCtx.stroke() // 保存为临时文件 offscreenCtx.draw(false, () { uni.canvasToTempFilePath({ canvasId: offscreen, success: (res) { this.backgroundImage res.tempFilePath } }) }) } // 在绘制时使用预渲染的背景 drawWithOffscreen() { if (this.backgroundImage) { this.ctx.drawImage(this.backgroundImage, 0, 0, 250, 250) } // 继续绘制动态内容... }7. 常见问题与解决方案在实际开发中你可能会遇到以下问题7.1 Canvas模糊问题现象在Retina屏幕上Canvas显示模糊解决方案// 获取设备像素比 const dpr uni.getSystemInfoSync().pixelRatio // 设置Canvas实际大小 const canvasWidth 300 const canvasHeight 300 canvas canvas-idprogressCanvas :style{width: canvasWidth px, height: canvasHeight px} :widthcanvasWidth * dpr :heightcanvasHeight * dpr /canvas // 在绘制时缩放上下文 ctx.scale(dpr, dpr)7.2 动画卡顿问题可能原因过于频繁的重绘复杂的计算阻塞主线程优化方案使用requestAnimationFrame替代setInterval将复杂计算移到Web Worker中使用transform代替直接修改位置属性7.3 多图表性能优化当页面需要显示多个环形图时复用Canvas上下文尽可能复用同一个上下文对象按需渲染只渲染可见区域的图表虚拟列表对于长列表使用虚拟滚动技术// 复用上下文示例 const ctxMap {} function getContext(canvasId, component) { if (!ctxMap[canvasId]) { ctxMap[canvasId] uni.createCanvasContext(canvasId, component) } return ctxMap[canvasId] }8. 扩展思路掌握了基础实现后可以考虑以下扩展方向8.1 3D环形图效果通过添加阴影和光照效果模拟3D视觉draw3DEffect() { // 添加内阴影 this.ctx.save() this.ctx.shadowColor rgba(0,0,0,0.3) this.ctx.shadowBlur 10 this.ctx.shadowOffsetX 2 this.ctx.shadowOffsetY 2 this.ctx.stroke() this.ctx.restore() // 添加高光 this.ctx.beginPath() this.ctx.setStrokeStyle(rgba(255,255,255,0.3)) this.ctx.setLineWidth(2) this.ctx.arc(centerX, centerY, radius - 3, -Math.PI/4, Math.PI/4) this.ctx.stroke() }8.2 交互功能增强点击事件处理canvas canvas-idinteractiveCanvas taphandleCanvasTap /canvas区域点击检测handleCanvasTap(e) { const { x, y } e.detail const distance Math.sqrt( Math.pow(x - centerX, 2) Math.pow(y - centerY, 2) ) if (distance radius - lineWidth distance radius) { console.log(环形图被点击) } }8.3 与其他图表组合将环形图与其他图表类型结合创建更丰富的数据仪表盘view classdashboard progress-chart :valuecompletionRate/ bar-chart :dataweeklyProgress/ line-chart :dataknowledgeTrend/ /view
从静态到动效：用uni-app+Canvas实现数据驱动的环形图动画（附完整代码）
从静态到动效用uni-appCanvas实现数据驱动的环形图动画附完整代码在移动应用开发中数据可视化是提升用户体验的关键环节。一个精心设计的环形图动画能够将枯燥的数字转化为直观的视觉反馈让用户一眼就能理解数据背后的含义。本文将带你深入探索如何在uni-app框架下利用Canvas实现一个数据驱动的环形图动画效果。1. 环形图动画的核心原理环形图动画的本质是将数据变化映射为视觉变化。我们需要解决三个核心问题数据到角度的转换将百分比数据转换为圆弧的结束角度动画平滑过渡使用定时器实现角度值的渐进变化视觉效果优化通过图层叠加和样式调整提升视觉体验1.1 数学基础极坐标与Canvas绘图Canvas的arc()方法是绘制圆弧的核心它接受以下参数ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)其中角度使用弧度制完整的圆是2π弧度。数据转换公式为endAngle (percentage / 100) * 2 * Math.PI1.2 动画实现方案对比方案优点缺点适用场景setInterval兼容性好实现简单帧率不稳定可能丢帧简单动画兼容性要求高requestAnimationFrame与浏览器刷新同步性能好需要手动控制帧率流畅动画现代浏览器CSS动画性能最佳实现简单控制粒度较粗简单过渡效果在uni-app中我们推荐使用requestAnimationFrame的变体uni.requestAnimationFrame来实现最流畅的动画效果。2. 基础环形图实现让我们从最基本的环形图开始逐步添加动画效果。2.1 Canvas基础设置首先在模板中定义Canvas元素canvas canvas-idprogressCanvas stylewidth: 300px; height: 300px /canvas然后在Vue的mounted钩子中初始化绘图上下文mounted() { this.ctx uni.createCanvasContext(progressCanvas, this) this.drawStaticRing() }2.2 绘制静态环形图基础环形图由两部分组成背景环和前景环。背景环表示最大值前景环表示当前值。drawStaticRing() { const centerX 150 // 圆心x坐标 const centerY 150 // 圆心y坐标 const radius 80 // 圆半径 const lineWidth 12 // 环宽度 // 绘制背景环 this.ctx.beginPath() this.ctx.setLineWidth(lineWidth) this.ctx.setStrokeStyle(#f2f2f2) this.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI) this.ctx.stroke() // 绘制前景环 const progress 65 // 示例数据65% const endAngle (progress / 100) * 2 * Math.PI this.ctx.beginPath() this.ctx.setLineWidth(lineWidth) this.ctx.setStrokeStyle(#0079fe) this.ctx.setLineCap(round) // 圆角端点 this.ctx.arc(centerX, centerY, radius, 0, endAngle) this.ctx.stroke() this.ctx.draw() }3. 添加动画效果静态环形图已经能够展示数据但添加动画后体验会大幅提升。3.1 动画核心逻辑我们使用requestAnimationFrame实现平滑动画animateRing(targetProgress) { const duration 1000 // 动画持续时间(ms) const startTime Date.now() const startProgress this.currentProgress const animate () { const elapsed Date.now() - startTime const progress Math.min(elapsed / duration, 1) // 使用缓动函数使动画更自然 this.currentProgress this.easeOutQuad(progress) * (targetProgress - startProgress) startProgress this.drawRing(this.currentProgress) if (progress 1) { this.animationId uni.requestAnimationFrame(animate) } } animate() } // 二次缓动函数 easeOutQuad(t) { return t * (2 - t) } drawRing(progress) { // 清空画布 this.ctx.clearRect(0, 0, 300, 300) // 绘制背景环(同上) // ... // 绘制动画前景环 const endAngle (progress / 100) * 2 * Math.PI this.ctx.beginPath() this.ctx.arc(centerX, centerY, radius, 0, endAngle) this.ctx.stroke() // 绘制中心文本 this.ctx.setFontSize(24) this.ctx.setFillStyle(#333) this.ctx.setTextAlign(center) this.ctx.fillText(${Math.round(progress)}%, centerX, centerY 8) this.ctx.draw() }3.2 性能优化技巧避免频繁创建渐变对象在动画开始前创建好渐变对象合理使用clearRect只清除需要重绘的区域减少不必要的绘制将静态元素分层绘制// 优化后的渐变处理 initGradient() { const gradient this.ctx.createLinearGradient(0, 0, 300, 0) gradient.addColorStop(0, #00F2FE) gradient.addColorStop(1, #4FACFE) this.gradient gradient }4. 高级效果实现基础动画已经完成现在添加一些提升视觉效果的高级特性。4.1 渐变色彩环形图使用Canvas的线性渐变功能创建更生动的视觉效果drawGradientRing(progress) { const endAngle (progress / 100) * 2 * Math.PI - Math.PI/2 this.ctx.beginPath() this.ctx.setLineWidth(12) this.ctx.setStrokeStyle(this.gradient) this.ctx.setLineCap(round) this.ctx.arc(centerX, centerY, radius, -Math.PI/2, endAngle) this.ctx.stroke() }4.2 多层叠加效果通过多个Canvas叠加实现更复杂的视觉效果view classchart-container canvas canvas-idbgLayer classcanvas-layer/canvas canvas canvas-idprogressLayer classcanvas-layer/canvas canvas canvas-idmarkerLayer classcanvas-layer/canvas view classcenter-text{{ progress }}%/view /view对应的样式.chart-container { position: relative; width: 300px; height: 300px; } .canvas-layer { position: absolute; width: 100%; height: 100%; } .center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #333; }4.3 刻度标记实现在单独的Canvas层上绘制刻度标记drawMarkers() { const ctx uni.createCanvasContext(markerLayer, this) const centerX 150 const centerY 150 const radius 80 // 每15度绘制一个刻度 for (let i 0; i 360; i 15) { const angle (i - 90) * Math.PI / 180 // 转换为弧度并调整起始位置 ctx.beginPath() ctx.setLineWidth(2) ctx.setStrokeStyle(#ccc) const x1 centerX (radius - 10) * Math.cos(angle) const y1 centerY (radius - 10) * Math.sin(angle) const x2 centerX radius * Math.cos(angle) const y2 centerY radius * Math.sin(angle) ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.stroke() } ctx.draw() }5. 数据驱动实现真正的数据驱动意味着图表能够响应数据变化并自动更新。5.1 响应式数据绑定在Vue组件中定义响应式数据export default { data() { return { progress: 0, // 当前进度值 targetProgress: 75 // 目标进度值 } }, watch: { targetProgress(newVal) { this.animateRing(newVal) } } }5.2 动态数据更新示例模拟从API获取数据并更新图表fetchProgressData() { // 模拟API请求 setTimeout(() { const newProgress Math.floor(Math.random() * 100) this.targetProgress newProgress }, 2000) }5.3 完整组件实现将环形图封装为可复用的Vue组件template view classprogress-chart canvas canvas-idprogressCanvas :style{width: size px, height: size px} /canvas view classcenter-text slot{{ progress }}%/slot /view /view /template script export default { props: { value: { type: Number, default: 0 }, size: { type: Number, default: 200 }, lineWidth: { type: Number, default: 12 }, colors: { type: Array, default: () [#00F2FE, #4FACFE] } }, data() { return { currentProgress: 0, ctx: null, gradient: null } }, mounted() { this.initCanvas() this.animateRing(this.value) }, methods: { initCanvas() { this.ctx uni.createCanvasContext(progressCanvas, this) this.initGradient() }, initGradient() { const gradient this.ctx.createLinearGradient(0, 0, this.size, 0) gradient.addColorStop(0, this.colors[0]) gradient.addColorStop(1, this.colors[1]) this.gradient gradient }, // 动画方法(同上) // 绘制方法(同上) }, watch: { value(newVal) { this.animateRing(newVal) } } } /script style .progress-chart { position: relative; display: inline-flex; align-items: center; justify-content: center; } .center-text { position: absolute; font-size: 24px; color: #333; } /style6. 实战案例学习进度展示让我们将这些技术应用到一个真实场景中——学习进度展示系统。6.1 场景需求分析展示用户课程完成百分比根据学习进度变化自动更新图表添加交互效果提升用户体验6.2 实现代码template view classlearning-progress progress-chart :valuecompletionRate :colors[#FF9A9E, #FAD0C4] size250 view classprogress-info text classpercentage{{ completionRate }}%/text text classlabel课程完成率/text /view /progress-chart button clicksimulateLearning继续学习/button /view /template script import ProgressChart from /components/progress-chart.vue export default { components: { ProgressChart }, data() { return { completionRate: 30 } }, methods: { simulateLearning() { // 模拟学习进度增加 const increment Math.floor(Math.random() * 10) 5 this.completionRate Math.min(this.completionRate increment, 100) } } } /script style .learning-progress { display: flex; flex-direction: column; align-items: center; padding: 20px; } .progress-info { display: flex; flex-direction: column; align-items: center; } .percentage { font-size: 32px; font-weight: bold; color: #333; } .label { font-size: 14px; color: #666; margin-top: 5px; } button { margin-top: 20px; background-color: #FF9A9E; color: white; border: none; padding: 10px 20px; border-radius: 20px; } /style6.3 性能优化实践使用离屏Canvas预渲染静态元素减少重绘区域使用clip()限制绘制范围合理使用transform减少计算量// 离屏Canvas示例 createOffscreenCanvas() { const offscreenCtx uni.createCanvasContext(offscreen, this) // 绘制静态背景 offscreenCtx.beginPath() offscreenCtx.arc(125, 125, 80, 0, 2 * Math.PI) offscreenCtx.setStrokeStyle(#f2f2f2) offscreenCtx.setLineWidth(12) offscreenCtx.stroke() // 保存为临时文件 offscreenCtx.draw(false, () { uni.canvasToTempFilePath({ canvasId: offscreen, success: (res) { this.backgroundImage res.tempFilePath } }) }) } // 在绘制时使用预渲染的背景 drawWithOffscreen() { if (this.backgroundImage) { this.ctx.drawImage(this.backgroundImage, 0, 0, 250, 250) } // 继续绘制动态内容... }7. 常见问题与解决方案在实际开发中你可能会遇到以下问题7.1 Canvas模糊问题现象在Retina屏幕上Canvas显示模糊解决方案// 获取设备像素比 const dpr uni.getSystemInfoSync().pixelRatio // 设置Canvas实际大小 const canvasWidth 300 const canvasHeight 300 canvas canvas-idprogressCanvas :style{width: canvasWidth px, height: canvasHeight px} :widthcanvasWidth * dpr :heightcanvasHeight * dpr /canvas // 在绘制时缩放上下文 ctx.scale(dpr, dpr)7.2 动画卡顿问题可能原因过于频繁的重绘复杂的计算阻塞主线程优化方案使用requestAnimationFrame替代setInterval将复杂计算移到Web Worker中使用transform代替直接修改位置属性7.3 多图表性能优化当页面需要显示多个环形图时复用Canvas上下文尽可能复用同一个上下文对象按需渲染只渲染可见区域的图表虚拟列表对于长列表使用虚拟滚动技术// 复用上下文示例 const ctxMap {} function getContext(canvasId, component) { if (!ctxMap[canvasId]) { ctxMap[canvasId] uni.createCanvasContext(canvasId, component) } return ctxMap[canvasId] }8. 扩展思路掌握了基础实现后可以考虑以下扩展方向8.1 3D环形图效果通过添加阴影和光照效果模拟3D视觉draw3DEffect() { // 添加内阴影 this.ctx.save() this.ctx.shadowColor rgba(0,0,0,0.3) this.ctx.shadowBlur 10 this.ctx.shadowOffsetX 2 this.ctx.shadowOffsetY 2 this.ctx.stroke() this.ctx.restore() // 添加高光 this.ctx.beginPath() this.ctx.setStrokeStyle(rgba(255,255,255,0.3)) this.ctx.setLineWidth(2) this.ctx.arc(centerX, centerY, radius - 3, -Math.PI/4, Math.PI/4) this.ctx.stroke() }8.2 交互功能增强点击事件处理canvas canvas-idinteractiveCanvas taphandleCanvasTap /canvas区域点击检测handleCanvasTap(e) { const { x, y } e.detail const distance Math.sqrt( Math.pow(x - centerX, 2) Math.pow(y - centerY, 2) ) if (distance radius - lineWidth distance radius) { console.log(环形图被点击) } }8.3 与其他图表组合将环形图与其他图表类型结合创建更丰富的数据仪表盘view classdashboard progress-chart :valuecompletionRate/ bar-chart :dataweeklyProgress/ line-chart :dataknowledgeTrend/ /view
