vue3半圆进度条,基于echarts仪表盘改造半环形进度图,扇形饼状图实现

已于 2023-10-16 16:53:56 修改
阅读量1.5k 收藏 3
点赞数 2
文章标签： echarts 前端 javascript typescript vue
于 2023-07-19 15:01:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013928546/article/details/131809162
版权

半环形进度图效果:

tupian1.jpg

概述

基于echarts仪表盘，改造半环形进度图 扇形饼状图,半环形图,vue3实现 封装组件为ts+setup语法糖+scss

详细

半环形进度图网上很少，需求设计是需要带有色块间隔开并且可以动态指定进度百分比，我通过echarts框架的仪表盘配置修改，效果非常nice

  • 应用步骤1: 通过npm/yarn 下载echarts或者html页面引入echartjs的cdn地址 可参照官方引入
  • 应用步骤2：根据需要显示的进度数动态计算环形的起止刻度，设置后可显示
    tupian3.png

tupian4.png

  • 最终效果
    tupian5.png

  • 封装为ProcessChart组件直接使用:
    1689672979196085568.png

项目地址:

vue3实现,封装组件ProcessChart.vue 点击顶部即可下载

jaqqq-teng
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
半圆形进度条(vue)
01-08
export default { data() { return { canvas:'', percent:'', ctx:'', circleX:'', circleY:'', radius:'', cradius:'', lineWidth:'', fontSize:'', color:'', process:'', circleLoading:null, }; }, mounted() { 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:'',
Vue中使用Echarts仪表盘展示实时数据的实现
01-18
在vue中echarts仪表盘实时数据 彩笔一枚，简单记录一下。 业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。 第一步： 基于准备好的dom，初始化echarts仪表盘实例。 第二步： 我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中 父组件中 子组件中
echarts-半圆
qq_14810159的博客
04-05 426
``` var myData = [{ name: ‘一班’, value: 200, per: 0.2 }, { name: ‘二班’, value: 300, per: 0.3 }, { name: ‘三班’, value: 500, per: 0.5 }] var myColor = [’#06cdff’, ‘#00ff84’, ‘#fef34f’, ‘rgba(0, 0, 0, 0)’] ...
echarts/自定义 环形进度条，源码+图片 复制运行 自取
最新发布
zhuxiaolong1234的博客
06-27 428
echarts/自定义 环形进度条 动态，源码+图片 复制运行 自取
vue3半圆进度条，尾部有个环形状结束块
baidu_21919557的专栏
02-28 1224
/ 从圆形底部开始画。obj.percent = progress //最终百分比。// canvas半径。//清除canvas内容。//控制结束时动画的速度。//canvas进度条。
Echarts钟表图
fhljzcs的博客
08-03 831
main(){ var myChart=echarts.init(document.getElementById('main2')) var option = { title:{ show:true, x:"center", y:"62%", }, tooltip: { show: true, ...
半圆进度条 vue
weixin_33836223的博客
04-30 2713
<template> <svg :viewBox="`0 0 ${2*radius + srtokeWidth} ${radius + srtokeWidth}`"> <path :d="`M ${srtokeWidth/2} ${radius + srtokeWidth/2} a ${radius} ${radius} 0 1 1 ${ra...
vcircle用Vuejs实现一个的圆形进度条
08-10
v-circle：用Vue.js实现一个的圆形进度条
实现各种圆形或者半圆形菜单，以及圆形进度条。
06-04
实现各种圆形或者半圆形菜单，以及圆形进度条。
vue2.0 自定义 饼状图 (Echarts)组件的方法
08-27
在 Vue 2.0 中，创建自定义饼状图 (Echarts) 组件可以实现灵活的数据可视化。下面，我们将创建一个自定义的饼状图组件，使用 Echarts 库来绘制饼状图。 组件结构 首先，我们需要创建一个名为 `Echarts.vue` 的组件...
纯JS+Vue和canvas实现一个仪表盘
菜就多练
07-31 3323
【代码】纯JS+Vue实现一个仪表盘。
echarts中半圆的环形进度图形
qq_39536826的博客
03-14 2694
echarts中半圆的环形进度图形
echarts 半圆形进度条
MFWSCQ的博客
02-26 5770
图例： 配置项： // 进度百分比 var value = 20 option = { // backgroundColor: '#36467E', title: [{ text: '半圆进度条', left: 'center', top: '70%', textStyle: { color: '#2892E8', fontSize: 14 } ...
半环形进度条(vue+element)
qq_43592064的博客
05-06 4635
<template> <div class="elCircle-progress"> <el-progress class="progress-position" type="dashboard" :percentage="percentage" :color="colors" ></el...
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半圆形进度条了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值