vue造轮子之圆形进度条

最新推荐文章于 2024-05-21 09:38:48 发布
最新推荐文章于 2024-05-21 09:38:48 发布
阅读量2.9k 收藏 13
点赞数 1
分类专栏： vue es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Only_ruiwen/article/details/103870351
版权
vue 同时被 2 个专栏收录
24 篇文章 0 订阅
订阅专栏
es6
12 篇文章 0 订阅
订阅专栏

在github上看到一个圆形进度条组件，比较适合于我现在的业务需求，然后就拷贝下来放进我的项目。但是cv程序员并不是我想要。所以就研究了一下它的源码，没想到的是源码竟然是如此简单和通俗易懂，先附上原作者的github地址和效果图。
https://github.com/cumt-robin/vue-awesome-progress
在这里插入图片描述
一.canvas基本用法
由于该组件是基于canvas完成的，所以我们需要知道canvas的基本用法，学习canvas地址为
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
在这里我们需要知道，canvas如何画圆和写文字，下面有几个简单的demo
canvs画圆
根据mdn文档的介绍
画圆需要借助arc(x,y,r,startAngle,endAngle,anticlockwise)方法。

该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
*注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)角度。

 <canvas width="450"
            height="450"
            ref="canvasDemo"></canvas>
<script>
 export default {
	mounted () {
    let canvas = this.$refs.canvasDemo;
    let ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(125, 125, 40, 0, 270 * (Math.PI / 180))
    ctx.stroke();
  }

 }
</script>

这个时候你就可以在页面上看到这个0-270deg的圆环
在这里插入图片描述
需要注意的一点是，圆弧它的起始角度为
在这里插入图片描述
关于如何给圆弧上颜色，大家可以自行去mdn上查找资料,下面是链接
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

二.绘制文本
canvas绘制文字主要使用了strokeText(text,x,y)方法，该方法主要接受3个参数，第一个为绘制文本内容,后两个分别对应着x和y。

<canvas width="450"
            height="450"
            ref="canvasDemo"></canvas>
export default {
  mounted () {
    let canvas = this.$refs.canvasDemo;
    let ctx = canvas.getContext("2d");
    ctx.font = "48px serif";
    ctx.textBaseline = "hanging";
    ctx.strokeText("Hello world", 0, 100);
  }
};

以上这两种方法是我们绘制canvas圆形进度条主要用到的方法，那么就开始在vue实现圆形的进度条。
在components下建立awesomeProgress文件夹和awesomeProgress.vue文件。
首先我们先来分析一下，画一个这样的圆环需要什么？
在这里插入图片描述
其实在这个圆弧中，它其实是分成了两个圆，一个是底圆，一个是进度的圆，那么，我们在这里就可以确定参数了。
1.底圆的半径r，我们可以通过它底圆的半径来确定这个canvas的宽度和高度，但是我们需要注意一点，**底圆的半径和进度圆的半径是一样的，唯一不同的地方就是进度圆是有线条的宽度的，而且这个进度圆也分了有进度圆点和没有进度圆点的情况，如果它是有进度圆点的情况，这个时候canvas的宽高应为(底圆的半径+小球的半径(默认为6))2。如果没有进度圆点，则进度圆点的半径为0的情况，canvas的宽高应为(底圆的半径+线条宽度/2(默认为8))2

在这里插入图片描述

三.确定圆形canvas的宽高
在awesomeProgress.vue文件中的template，编写一个canvas,

<template>
  <canvas ref="canvasDemo"
          :width="canvasSize"
          :height="canvasSize" />
</template>

export default {
  name: "awesomeProgress",
  props: {
    // 底部圆的半径
    circleRadius: {
      type: Number,
      default: 40
    },
    // 底部圆的线条宽度
    circleWidth: {
      type: Number,
      default: 2
    },
    // 底部圆的颜色
    circleColor: {
      type: String,
      default: '#e5e5e5'
    },
    // 进度圆的线条宽度
    lineWidth: {
      type: Number,
      default: 8
    },
    // 进度圆小球上的半径
    pointRadius: {
      type: Number,
      default: 6
    }
  },
  computed: {
    // 求出进度圆和底部圆半径之和
    outerRadius () {
      return this.pointRadius > 0 ? (this.circleRadius + this.pointRadius) : (this.circleRadius + this.lineWidth / 2);
    },
    // canvas的宽度和高度需*2
    canvasSize () {
      return this.outerRadius * 2
    }
  },
  methods: {
    initCanvas () {
      let canvas = this.$refs.canvasDemo; // 获取canvas的dom节点
      let ctx = canvas.getContext("2d");
      // 画圆环
      ctx.strokeStyle = this.circleColor;
      ctx.lineWidth = this.circleWidth;
      ctx.beginPath();
      ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, 0, this.deg2Arc(360));
      ctx.stroke();
    },
    // 角度转换弧度
    deg2Arc (deg) {
      return deg / 180 * Math.PI
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initCanvas()
    })
  }
}

那么此时页面上就会渲染出以下的图形,
在这里插入图片描述
四.绘制进度圆和进度圆文字
既然是进度圆，则必须告知，进度圆在那个地方结束，在这里就假定一个参数percent,这个参数代表的是进度完成了百分之多少。那么这个百分之多少则必须映射到我们这个进度圆上面去。其实我们是可以通过它的百分比来求出这个进度圆结束的角度。

export default {
  name: "awesomeProgress",
  props: {
    // 底部圆的半径
    circleRadius: {
      type: Number,
      default: 40
    },
    // 底部圆的线条宽度
    circleWidth: {
      type: Number,
      default: 2
    },
    // 底部圆的颜色
    circleColor: {
      type: String,
      default: '#e5e5e5'
    },
    // 进度圆的线条宽度
    lineWidth: {
      type: Number,
      default: 8
    },
    // 进度圆小球上的半径
    pointRadius: {
      type: Number,
      default: 6
    },
    // 进度圆的百分比
    percentage: {
      type: Number,
      default: 0,
      validator: function (value) {
        return value >= 0 && value <= 100
      }
    },
    // 进度圆的起始角度
    startDeg: {
      type: Number,
      default: 270,
      validator: function (value) {
        return value >= 0 && value < 360
      }
    },
    fontSize: {
      type: Number,
      default: 14
    },
    fontColor: {
      type: String,
      default: '#3B77E3'
    },
    // 是否显示文字
    showText: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 求出进度圆和底部圆半径之和
    outerRadius () {
      return this.pointRadius > 0 ? (this.circleRadius + this.pointRadius) : (this.circleRadius + this.lineWidth / 2);
    },
    // canvas的宽度和高度需*2
    canvasSize () {
      return this.outerRadius * 2
    }
  },
  methods: {
    initCanvas () {
      let canvas = this.$refs.canvasDemo; // 获取canvas的dom节点
      let ctx = canvas.getContext("2d");
      // // 画圆环
      // 画圆环
      ctx.strokeStyle = this.circleColor;
      ctx.lineWidth = this.circleWidth;
      ctx.beginPath();
      ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, 0, this.deg2Arc(360));
      ctx.stroke();

      const endDeg = this.getTargetDegByPercentage(this.startDeg, this.percentage); // 求出进度圆结束的角度
      this.animateDrawArc(canvas, ctx, this.startDeg, endDeg);
    },
    // 画进度圆,文字
    animateDrawArc (canvas, ctx, startDeg, endDeg) {
      // 画文字
      if (this.showText) {
        this.drawText(ctx, canvas)
      }
      const startArc = this.deg2Arc(startDeg);
      ctx.strokeStyle = "red";
      ctx.lineWidth = this.lineWidth;
      ctx.beginPath();
      ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, startArc, this.deg2Arc(endDeg));
      ctx.stroke();
    },
    // 画文字的方法
    drawText (ctx, canvas) {
      ctx.font = `${this.fontSize}px Arial,"Microsoft YaHei"`
      ctx.fillStyle = this.fontColor;
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      let label = Math.round(this.percentage) + "%";
      ctx.fillText(label, canvas.clientWidth / 2, canvas.clientWidth / 2);
    },
    // 求出进度圆结束的角度的方法
    getTargetDegByPercentage (startDeg, percentage) {
      if (percentage === 100) {
       	 return startDeg + 360;
      }
      return (startDeg + 360 * percentage / 100) % 360
    },
    // 角度转换弧度
    deg2Arc (deg) {
      return deg / 180 * Math.PI
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initCanvas()
    })
  }
}

在其他组件中引用的方式为：

<AwesomeProgress circle-color="#e5e9f2"
                     :circle-radius="60"
                     :startDeg="0"
                     :percentage="50" />

此时的效果为：
在这里插入图片描述
这个时候已经能出现半圆弧的效果，而且能够根据percentage的值(0-100)不同进行了变化。但是这中展示效果过于生硬，我们期望能够出现动画效果。

五.添加进度圆渐变色
在做动画之前，我们先给进度圆添加颜色，毕竟红色实在是太辣眼睛了…
关于给canvas添加渐变颜色在mdn上也说的很清楚
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
按照文档描述：

使用 createLinearGradient 方法创建一个指定了开始和结束点的CanvasGradient 对象。创建成功后， 你就可以使用 CanvasGradient.addColorStop() 方法，根据指定的偏移和颜色定义一个新的终止。 如例子所示，渐变允许赋值给当前的fillStyle ，使用fillRect() 方法时，在 canvas 上绘制出效果。


<script>
// 参考于https://github.com/cumt-robin/vue-awesome-progress/blob/master/src/components/index.vue
// import BezierEasing from "bezier-easing";
export default {
  name: "awesomeProgress",
  props: {
    // 渐变色的颜色数组
    lineColorStops: {
      type: Array,
      default: function () {
        return [
          { percent: 0, color: '#13CDE3' },
          { percent: 1, color: '#3B77E3' }
        ]
      }
    },
    // 是否使用渐变色
    useGradient: {
      type: Boolean,
      default: true
    },
    lineColor: {
      type: String,
      default: '#3B77E3'
    }
  },
  methods: {
    initCanvas () {
      let canvas = this.$refs.canvasDemo; // 获取canvas的dom节点
      let ctx = canvas.getContext("2d");
      // // 画圆环
      ctx.strokeStyle = this.circleColor;
      ctx.lineWidth = this.circleWidth;
      ctx.beginPath();
      ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, 0, this.deg2Arc(360));
      ctx.stroke();

      const endDeg = this.getTargetDegByPercentage(this.startDeg, this.percentage); // 求出进度圆结束的角度
      this.animateDrawArc(canvas, ctx, this.startDeg, endDeg);
    },
    // 画进度圆,文字和圆点的方法
    animateDrawArc (canvas, ctx, startDeg, endDeg) {
      // 画文字
      if (this.showText) {
        this.drawText(ctx, canvas)
      }
      if (this.useGradient) {
        this.gradient = ctx.createLinearGradient(this.circleRadius, 0, this.circleRadius, this.circleRadius * 2);
        this.lineColorStops.forEach(item => {
          this.gradient.addColorStop(item.percent, item.color);
        });
      }
      const startArc = this.deg2Arc(startDeg);
      ctx.strokeStyle = this.useGradient ? this.gradient : this.lineColor;
      ctx.lineWidth = this.lineWidth;
      ctx.beginPath();
      ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, startArc, this.deg2Arc(endDeg));
      ctx.stroke();
    }
  }
}
</script>

<style>
</style>

这时候你就可以看到很漂亮的渐变色出现了，具体效果如下
在这里插入图片描述
六.给进度圆弧添加动画效果
添加动画效果，我们借助第三方库bezier-easing，只需npm i bezier-easing --save即可，然后在组件顶部把它引入：

import BezierEasing from "bezier-easing";

其实我们都知道，如果是希望元素产生动画效果，我们传统的方式是采用setInterval时间的方式来堆积动画效果，而这里更希望能够以帧的方式来实现，那么就有个api是window.requestAnimationFrame，这个api的具体用法在mdn文档也有介绍
https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame

其实求他的帧数，要分成三种情况，都是比较它的startDeg和endDeg，求出它的差值，再用差值去乘以这个运动函数即可，

<template>
  <canvas ref="canvasDemo"
          :width="canvasSize"
          :height="canvasSize" />
</template>

<script>
// 参考于https://github.com/cumt-robin/vue-awesome-progress/blob/master/src/components/index.vue
import BezierEasing from "bezier-easing";
export default {
  name: "awesomeProgress",
  props: {
    // 底部圆的半径
    circleRadius: {
      type: Number,
      default: 40
    },
    // 底部圆的线条宽度
    circleWidth: {
      type: Number,
      default: 2
    },
    // 底部圆的颜色
    circleColor: {
      type: String,
      default: '#e5e5e5'
    },
    // 进度圆的线条宽度
    lineWidth: {
      type: Number,
      default: 8
    },
    // 进度圆小球上的半径
    pointRadius: {
      type: Number,
      default: 6
    },
    // 进度圆的百分比
    percentage: {
      type: Number,
      default: 0,
      validator: function (value) {
        return value >= 0 && value <= 100
      }
    },
    // 进度圆的起始角度
    startDeg: {
      type: Number,
      default: 270,
      validator: function (value) {
        return value >= 0 && value < 360
      }
    },
    fontSize: {
      type: Number,
      default: 14
    },
    fontColor: {
      type: String,
      default: '#3B77E3'
    },
    // 是否显示文字
    showText: {
      type: Boolean,
      default: true
    },
    // 渐变色的颜色数组
    lineColorStops: {
      type: Array,
      default: function () {
        return [
          { percent: 0, color: '#13CDE3' },
          { percent: 1, color: '#3B77E3' }
        ]
      }
    },
    // 是否使用渐变色
    useGradient: {
      type: Boolean,
      default: true
    },
    // 线条颜色
    lineColor: {
      type: String,
      default: '#3B77E3'
    },
    // 是否需要动画
    animated: {
      type: Boolean,
      default: true
    },
    // 动画函数
    easing: {
      type: String,
      // ease-in
      default: '0.42,0,1,1',
      validator: function (value) {
        return /^(\d+(\.\d+)?,){3}\d+(\.\d+)?$/.test(value)
      }
    },
    duration: {
      type: Number,
      // 浏览器大约是60FPS，因此1s大约执行60次requestAnimationFrame
      default: 1
    },
  },
  computed: {
    // 求出进度圆和底部圆半径之和
    outerRadius () {
      return this.pointRadius > 0 ? (this.circleRadius + this.pointRadius) : (this.circleRadius + this.lineWidth / 2);
    },
    // canvas的宽度和高度需*2
    canvasSize () {
      return this.outerRadius * 2
    },
    steps () {
      return this.duration * 60
    }
  },
  data () {
    return {
      gradient: null, // 渐变色对象
      easingFunc: null
    }
  },
  methods: {
    initCanvas () {
      let canvas = this.$refs.canvasDemo; // 获取canvas的dom节点
      let ctx = canvas.getContext("2d");
      // // 画圆环
      // 画圆环
      ctx.strokeStyle = this.circleColor;
      ctx.lineWidth = this.circleWidth;
      ctx.beginPath();
      ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, 0, this.deg2Arc(360));
      ctx.stroke();

      const endDeg = this.getTargetDegByPercentage(this.startDeg, this.percentage); // 求出进度圆结束的角度
      // this.animateDrawArc(canvas, ctx, this.startDeg, endDeg);
      if (this.percentage === 0) {
        this.animateDrawArc(canvas, ctx, this.startDeg, endDeg, 0, 0);
      } else {
        if (this.animated) {
          this.animateDrawArc(canvas, ctx, this.startDeg, endDeg, 1, this.steps);
        } else {
          this.animateDrawArc(canvas, ctx, this.startDeg, endDeg, this.steps, this.steps);
        }
      }
    },
    // 画进度圆,文字和圆点的方法
    animateDrawArc (canvas, ctx, startDeg, endDeg, stepNo, stepTotal) {
      // 画文字
      window.requestAnimationFrame(() => {
        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        if (this.showText) {
          this.drawText(ctx, canvas, stepNo, stepTotal)
        }
        if (this.useGradient) {
          this.gradient = ctx.createLinearGradient(this.circleRadius, 0, this.circleRadius, this.circleRadius * 2);
          this.lineColorStops.forEach(item => {
            this.gradient.addColorStop(item.percent, item.color);
          });
        }
        // 画进度圆
        if (stepTotal > 0) {
          const nextDeg = this.getTargetDeg(startDeg, endDeg, stepNo, stepTotal); // 求出下一帧的角度
          const nextArc = this.deg2Arc(nextDeg);
          const startArc = this.deg2Arc(startDeg);
          ctx.strokeStyle = this.useGradient ? this.gradient : this.lineColor;
          ctx.lineWidth = this.lineWidth;
          ctx.beginPath();
          ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, startArc, nextArc);
          ctx.stroke();
        }
        if (stepNo !== stepTotal) {
          stepNo++;
          this.animateDrawArc(canvas, ctx, startDeg, endDeg, stepNo, stepTotal)
        }
      })
    },
    // 画文字的方法
    drawText (ctx, canvas, stepNo, stepTotal) {
      ctx.font = `${this.fontSize}px Arial,"Microsoft YaHei"`
      ctx.fillStyle = this.fontColor;
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      let label = Math.round(this.easingFunc(stepNo / stepTotal) * this.percentage) + "%";
      ctx.fillText(label, canvas.clientWidth / 2, canvas.clientWidth / 2);
    },
    // 求出下一帧角度
    getTargetDeg (startDeg, endDeg, stepNo, stepTotal) {
      if (stepTotal === 0) {
        return startDeg;
      }
      startDeg = startDeg % 360; // 180=> 180 361=>1
      endDeg = endDeg % 360;
      console.log(startDeg, endDeg)
      if (startDeg > endDeg) {
        const diff = endDeg + 360 - startDeg
        let nextDeg = startDeg + diff * this.easingFunc(stepNo / stepTotal)
        console.log(nextDeg);
        if (nextDeg > 360) {
          nextDeg = nextDeg - 360
          return nextDeg > endDeg ? endDeg : nextDeg
        }
        return nextDeg
      } else if (startDeg < endDeg) {
        const diff = endDeg - startDeg
        let nextDeg = startDeg + diff * this.easingFunc(stepNo / stepTotal)
        console.log(nextDeg);
        if (nextDeg > endDeg) {
          return endDeg
        } else if (nextDeg > 360) {
          return nextDeg - 360
        }
        return nextDeg
      } else {
        return startDeg + 360 * this.easingFunc(stepNo / stepTotal)
      }
    },
    // 求出进度圆结束的角度的方法
    getTargetDegByPercentage (startDeg, percentage) {
      if (percentage === 100) {
        return startDeg + 360;
      }
      return (startDeg + 360 * percentage / 100) % 360
    },
    // 角度转换弧度
    deg2Arc (deg) {
      return deg / 180 * Math.PI
    }
  },
  mounted () {
    const easingParams = this.easing.split(',').map(item => Number(item))
    this.easingFunc = BezierEasing(...easingParams);
    console.log(this.easingFunc);
    this.$nextTick(() => {
      this.initCanvas()
    })
  }
}
</script>

<style>
</style>

最后还有一个小圆点的位置计算，实现起来也比较简单，解决思路：根据三角形的正玄、余弦来得值；
假设一个圆的圆心坐标是(a,b)，半径为r，则圆上每个点的X坐标=a + Math.sin(2Math.PI / 360) * r ；Y坐标=b + Math.cos(2Math.PI / 360) * r ；
。如果想要获得更加详细的代码可以参考原作者github地址，https://github.com/cumt-robin/vue-awesome-progress
而这个组件也给我收录了日常开发的组件库中，欢迎各位朋友star。
https://github.com/whenTheMorningDark/workinteresting/blob/master/src/components/awesomeProgress/awesomeProgress.vue

等不回天亮等时光
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue圆环进度条_vue优雅圆环进度指示器– vue-ellipse-progress
weixin_39792049的博客
12-19 962
另一个Vue.js组件可创建优雅的，动画的，基于SVG的圆形进度条。变更日志：v1.3.0(09/20/2020)该版本包含有关与IOS和MacOS兼容性的重要修复，并增加了格式化圆圈图例的可能性。v1.2.0(08/22/2020)reverse属性使进度圈逆时针填充进度现在也接受[-100，100]范围内的负值增加了对CDN使用的支持修复和改进v1.1.1(07/12/2020)此版本用自己的...
vue制作圆形进度条
weixin_40445256的博客
02-19 2767
vue制作圆形进度条效果图代码html结构 效果图 代码 html结构 <div ref="cir" class="circle"> <svg viewBox="0 0 1040 1040"> <path style="fill:none;stroke:#d4d4d4;stroke-width:40px" d="M 520 520 m 0 -500 a 500 500 0 1 1 0 1000 a 500 500 0 1 1 0 -1000">&lt
vue： 简单的canvas实现圆环进度条
weixin_44076167的博客
03-16 1737
效果如下： 代码如下： <template> <div> <!-- 圆环背景 --> <canvas id="canvas" style="width: 100%;height: 100%"> </canvas> </div> </template> <script> export default { // 电量环
推荐项目：vue-radial-progress - 优雅的环形进度条组件
最新发布
gitblog_00076的博客
05-21 451
推荐项目：vue-radial-progress - 优雅的环形进度条组件 项目地址:https://gitcode.com/wyzantinc/vue-radial-progress 在寻找一个能够为你的Vue应用增添生动视觉效果的组件吗？那么，vue-radial-progress可能是你的理想选择。这个组件利用SVG和JavaScript实现了带有渐变色的环形动画进度条，将数据可视化与现代W...
vue-circle-progress:vue圆形进度条,vue组件
05-23
vue-circle-progress vue圆形进度条组件，自由可定制 示例运行步骤 【下载依赖】npm install 【运行项目】npm run dev 【打开对应链接】浏览器打开对应链接 【设置top值示例】 源代码 /src/App.vue是使用圆形进度条组件的代码实例 组件源代码为circle-progress.vue，拷贝该文件，直接使用即可 使用方法如下 参数名 值类型 是否必填 参数作用 默认值 id String 选填 组件的id，多次定义设置不同的值 1 width Number 必填 设置圆整体的大小，单位为px 无 radius Number 必填 设置进度条宽度，单位为px 无 progress Number 必填 设置进度百分比 无 barColor String 必填 设置进度条颜色 无 backgroundColor String 必填 设置进度条背景颜色
vue3实现圆环进度条组件
weixin_45118138的博客
05-19 1891
前言 使用vue3实现一个圆环进度条 带有加载动画、中间为插槽、背景可以设置渐变效果 效果展示 完整代码如下 <template> <div class="percentloop" ref="percentloop"> <div class="circle-left"> <div ref="leftcontent"></div> </div> <div class="circ
半圆形进度条(vue)
01-08
export default { data() { return { canvas:'', percent:'', ctx:'', circleX:'', circleY:'', radius:'', cradius:'', lineWidth:'', fontSize:'', color:'', process:'', ... this.toCan
半圆形进度条(vue加强版)
01-08
半环形进度条DEMO 10 20 30 40 50 60 70 80 90 100 export default { data() { return { canvas:'', percent:'', ctx:'', circleX:'', circleY:'', radius:'', cradius:'', lineWidth:''...
vue2.0+SVG实现音乐播放圆形进度条组件
10-16
在本文中，我们将深入探讨如何使用Vue2.0和SVG技术来实现一个音乐播放的圆形进度条组件。这个组件能够动态地展示音乐的播放进度，并且具有良好的视觉效果。首先，我们来看看组件的核心代码。 在`<template>`部分，...
Vue的事件响应式进度条组件实例详解
11-28
找了很多vue进度条组件，都不包含拖拽和点击事件，input range倒是原生包含input和change事件，但是直接基于input range做进度条的话，样式部分需要做大量调整和兼容性处理。即使做好了，将来需要修改外观，又是一番...
基于vue2.0实现的滑动进度条
06-01
以上就是基于Vue 2.0实现滑动进度条的基本步骤。通过这个组件，我们可以实现一个响应用户鼠标拖拽和点击的进度条，展示当前的进度值。这个组件可以灵活地嵌入到任何Vue应用中，提供直观的进度反馈。 需要注意的是，...
vcircle用Vuejs实现一个的圆形进度条
08-10
v-circle：用Vue.js实现一个的圆形进度条
vue环形进度条组件实例应用
10-17
在本文中我们给大家分享了关于vue环形进度条组件的使用方法以及实例代码，需要的朋友们跟着测试下吧。
环形进度条（有动效）
03-03
环形进度条，填充颜色具有渐变色，可以直接作为控件在xml或代码中使用。
用初中数学知识撸一个canvas环形进度条
前端原创分享，常年坚持记录和分享，全网阅读量超百万
11-09 534
周末好，今天给大家带来一款接地气的环形进度条组件vue-awesome-progress
自定义view圆形进度条。
lmq121210的博客
04-24 489
关于自定义view，学习了很长时间中午有进展了 首先自定义view分为两种：1：内部是空的进度条（如图1所示）2：内部是实心的进度条（图2）； 首先说一下我的思路吧； 如果是空心的进度条，这就简单了，底部是一个圆形的实心图形1，然后在这个图形的基础上再画实心弧形2； 如果是实心的进度条，这相比于空心进度条就多了两步，也就是在弧形2之后再画一个实心圆3，最后放上text,也就是数字表示的进度条
vue圆环进度条_vue圆环形进度条组件
weixin_39936558的博客
01-12 1679
1.先来个圆形背景，为了后续方便定位，请给它安排上position属性。CircleProgress.vueexport default {name: "circle-progress"};.circle-progress {position: relative;left: 0;top: 0;width: 100%;height: 100%;background-color: #5140b4;bo...
uniapp ucharts 圆弧进度条 自定义标题设置
qq_40895460的博客
04-11 1558
这个是不能自定义的，只能强制把view浮动在中间
使用canvas制作圆形进度条
m0_68349563的博客
12-26 802
使用 canvas 绘制圆形进度条
vue中实现echarts 半圆形进度条
10-25
在Vue中实现Echarts半圆形进度条，可以按照以下步骤进行： 1. 安装Echarts和Vue-Echarts ``` npm install echarts vue-echarts --save ``` 2. 在Vue组件中引入Echarts和Vue-Echarts ```javascript import echarts from 'echarts' import ECharts from 'vue-echarts/components/ECharts.vue' ``` 3. 在Vue组件中注册Echarts组件 ```javascript export default { components: { 'v-chart': ECharts } } ``` 4. 在Vue组件中定义Echarts配置项 ```javascript data() { return { option: { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, pointer: { show: false }, axisLine: { lineStyle: { width: 10, color: [[0.2, '#67e0e3'], [0.8, '#37a2da'], [1, '#fd666d']] } }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, detail: { show: false }, data: [{value: 50}] } ] } } } ``` 5. 在Vue组件中使用Echarts组件，并传入配置项 ```html <v-chart :options="option"></v-chart> ``` 这样就可以在Vue中实现Echarts半圆形进度条了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值