Loading... ### 渲染节点 ```html <canvas canvas-id="top-info-canvas" id="top-info-canvas" class="top-info-canvas" /> ``` ### css样式 设置高度 ```scss .top-info-canvas { width: 210rpx; height: 210rpx; } ``` ### js渲染 ```js const randomCharts = (avgRate:number) => { const ctx = uni.createCanvasContext('top-info-canvas', getCurrentInstance()) new uCharts({ type: "arcbar", context: ctx, width: uni.upx2px(210), // 与css高度一致 height: uni.upx2px(210), // 与css高度一致 series: [ { name: "正确率", color: "#1E66FF", data: avgRate / 100 } ], animation: true, background: "#FFFFFF", color: ["#1E66FF","#69F9F2"], padding: undefined, title: { name: `${avgRate}%`, fontSize: 18, color: "#000000" }, subtitle: { name: "正确率", fontSize: 12, color: "#94989C" }, extra: { arcbar: { type: "circle", width: 12, backgroundColor: "#E9E9E9", startAngle: 1.75, endAngle: 0.25, gap: 2, direction: "ccw", linearType: "custom" } } }) } ``` 无法渲染请留意渲染时机 最后修改：2023 年 09 月 22 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏