ucharts 圆形进度图使用

菜鸟成长之路

1.在官网上下载ucharts，引入至所需页面

参考文献：https://blog.csdn.net/m0_49529959/article/details/107770498?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

2.画圆形进度图

<template><view><view class="qiun-columns"><view class="content"><canvas canvas-id="canvasRing" id="canvasRing" class="canvas"></canvas></view></view></view>
</template><script>import uCharts from "../../ucharts/u-charts.min.js";var _self;var canvaRing = {};export default {data() {return {pixelRatio: 1,cWidth3: '', //圆弧进度图cHeight3: '', //圆弧进度图arcbarWidth: '', //圆弧进度图，进度条宽度Arcbar1: {//图表数据series: [{data: 0.8, //数据显示color: "#fff",name: "资料完整度"}],},}},onShow() {_self = this;this.cWidth3 = uni.upx2px(280);//环形图宽度大小this.cHeight3 = uni.upx2px(280);this.arcbarWidth = uni.upx2px(10);//环形的宽度//画进度条this.showRing("canvasRing", this.Arcbar1);},methods: {// //画进度条showRing(canvasId, chartData) {console.log("chartData", chartData)new uCharts({$this: _self,canvasId: canvasId,type: 'arcbar',fontSize: 11,title: {name: Math.round(chartData.series[0].data * 100) + '%', //显示的文字百分比                  color: chartData.series[0].color, //环形图的颜色fontSize: 24 * this.pixelRatio//字体大小},subtitle: {name: chartData.series[0].name, //显示文字color: '#FFABC0',//文字颜色fontSize: 16 * this.pixelRatio//字体大小},extra: {arcbar: {type: 'circle', //整圆类型进度条图width: this.arcbarWidth * this.pixelRatio, //圆弧的宽度startAngle: 0.5, //整圆类型只需配置起始角度即可,backgroundColor: '#FE809D', //环形图的剩余百分比颜色}},background: '#FFABC0',pixelRatio: this.pixelRatio,series: chartData.series,animation: false,width: this.cWidth3 * this.pixelRatio,height: this.cHeight3 * this.pixelRatio,dataLabel: true,});},}}
</script><style lang="less">.qiun-columns {height: 600rpx;background-color: #FD315C;}.content {height: 400rpx;position: relative;.canvas {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 140px;height: 140px;}}</style>

效果展示

ucharts 圆形进度图使用相关推荐

前端圆形进度图_Highcharts 圆形进度条式测量图
Highcharts 圆形进度条式测量图以下实例演示了圆形进度条式测量图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 chart.type ...
前端圆形进度图_使用CSS3实现圆形进度条
一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到100%:但是很少有圆形的进度条,本篇文章稍微讲解下如何使用CSS3实现圆形进度条一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到 ...
前端圆形进度图_图解CSS3制作圆环形进度条的实例教程
首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: CSS Code复制内容到剪贴板 .circleprogress{ width:160px; height ...
前端圆形进度图_CSS3+JS实现静态圆形进度条
一.实现原理首先,我们来一个圆(黑色). 接着,再来两个半圆,将黑色的圆遮住.(为了演示,左右两侧颜色不一样) 这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(1 ...
前端圆形进度图_js圆形进度的实现，可以自定义进度图标
需求是下图这样,是一个环形进度条.最前面还有个自定义的图标.搜了很多各种环形进度,前面有自定义图标的不多,记录一下 html文件代码: 首页重新开始 $(function () { var run ...
圆形进度条（包括仿QQ图片加载进度图）
原文:圆形进度条(包括仿QQ图片加载进度图) 源代码下载地址:http://www.zuidaima.com/share/1581277496822784.htm 以前找到的自定义圆形进度条
VC用MFC开发的圆形进度条控件
DownLoad Src VC用MFC开发的圆形进度条控件 visualsan@yahoo.cn NUAA zss 在NBA2007游戏里,还有很多科幻电影里,经常可以看到圆形进度条.有的用来显示导弹 ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
java圆形进度条_可拖拽圆形进度条组件（支持移动端）
好久之前写过一个可拖拽圆形进度条的dome,中间有网友反馈过一些问题,最近比较闲有时间修改了一些问题也做了一些优化,并封装成组件,基于canvas实现,只需传入放置组件dom容器,任何框架均可直接使用 ...

ucharts 圆形进度图使用

ucharts 圆形进度图使用相关推荐

最新文章

热门文章