vant 半圆仪表盘_echart 画出仪表盘式进度条

最新推荐文章于 2024-08-18 10:44:32 发布

weixin_39788382

最新推荐文章于 2024-08-18 10:44:32 发布

阅读量722

点赞数

文章标签： vant 半圆仪表盘

本文链接：https://blog.csdn.net/weixin_39788382/article/details/111734793

版权

当Element-UI和Vant的组件无法满足PC和移动端仪表盘进度条需求时，通过Vue和Echarts自定义了一个适应PC及移动端的半圆仪表盘。实现过程包括初始化Echarts实例，配置角度轴、半径轴、极坐标系和系列数据，确保图表可自适应窗口大小。提供效果展示及Echarts示例链接。

摘要由CSDN通过智能技术生成

pc 端仪表盘进度条：可以参考 element-ui中的组件

移动端的进度条：可以参考京东或者 vant 中的组件

但是没有一个可以完全符合自己的项目需求，所以就只能自己做一个：

基于 Vue 框架

makeEcharet() {

var myChart = this.$echarts.init(document.getElementById('myChart'))

myChart.resize({

width: 'auto',

height: 240

})

// 指定图表的配置项和数据

var option = {

angleAxis: {

axisLine: {

show: false

axisLabel: {

show: false

splitLine: {

show: false

axisTick: {

show: false

min: 0,

max: 133.5,

boundaryGap: ['0', '100'],

startAngle: 225

radiusAxis: {

type: 'category',

axisLine: {

show: false

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39788382

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vant 半圆仪表盘_微信小程序之圆形进度条（自定义组件）

weixin_39974400的博客

12-20

1966

思路使用2个canvas一个是背景圆环，一个是彩色圆环。使用setInterval让彩色圆环逐步绘制。在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的.它们的缺点为:1.组件必须用js实例化 (如果我有一个任务列表,后面会显示每个任务的进度,每个任务都必须实例化)2.它们js实例化时,绘图是用 px绘制,导致页面用rpx布局,组件却用px绘制.修改后的组件在compone...

vant 半圆仪表盘_超全的 Vue 开源项目合集，签收一下

weixin_39945871的博客

02-04

1027

原标题：超全的 Vue 开源项目合集，签收一下写在前面包括一些ui库和比较完整的小项目。ui库会对主要的单选框，多选框，级联选择器，滑块，日期/时间选择器，进度条，分页，弹框，通知，导航菜单，步骤条等截图比较评价纯属个人主观感受，有夸张成分，只是一种表达，如有不喜请无视之。欢迎指正不足和提供更多更好的vue库，项目，方便参考和学习使用。一、前台 UI 组件库1.Element传送门：https:...

参与评论您还未登录，请先登录后发表或查看评论

Flutter Web仪表盘教程

最新发布

gitblog_00910的博客

08-18

386

Flutter Web仪表盘教程 flutter_web_dashboardFlutter Bootstrap Style Admin UI项目地址:https://gitcode.com/gh_mirrors/fl/flutter_web_dashboard 项目介绍本项目是由kalismeras61维护的Flutter Web仪表盘——一个响应式Web管理门户。它设计为支持光暗模式及多语言...

vant 半圆仪表盘_CAP带你轻松玩转Asp.Net Core消息队列

weixin_42160424的博客

02-04

312

CAP带你轻松玩转Asp.Net Core消息队列CAP是什么？CAP是由我们园子里的杨晓东大神开发出来的一套分布式事务的决绝方案，是.Net Core Community中的第一个千星项目(目前已经1656 Star)，具有轻量级、易使用、高性能等特点。本博客主要针对易用性这一点，展开叙述，一起看看CAP如何结合EF Core和RabbitMQ带领小白轻松走入分布式消息队列的世界。准备首先，...

半圆形进度条(vue)

01-08

export default { data() { return { canvas:'', percent:'', ctx:'', circleX:'', circleY:'', radius:'', cradius:'', lineWidth:'', fontSize:'', color:'', process:'', circleLoading:null, }; }, mounted() { this.toCan

vue+vant+vue-echarts竖版图表

m0_38135164的博客

03-18

567

【代码】vue+vant+vue-echarts竖版图表。

vant 半圆仪表盘_开源一个微信小程序仪表盘组件过程解析

weixin_39860201的博客

12-20

623

前言最近开发了一个小程序动态仪表盘组件，并以第三方小程序组件的形式发布到npm，任意小程序项目都可以安装这个模块，从而获得仪表盘功能。组件功能目前还非常简单，先来预览一下效果：感兴趣的直接看源码：下面是踩坑过程。如何开发微信小程序自定义组件官方提供了一个CLI工具专门用于开发小程序自定义组件，首先全局安装这个工具：npm install -g @wechat-miniprogram/minipro...

vant + echarts + 微信公众号页面实现柱状图

m0_74141658的博客

06-13

342

绘画方法执行有个需要注意的地方，因为页面还没有完全加载完成，所以要等页面加载完成后再执行，否则的话会报错（Error: Initialize failed: invalid dom.），导致浪费了很多时间。vue内引入依赖：import * as echarts from 'echarts';添加echarts 依赖：npm install echarts -save。将准备好的dom，初始化echarts实例，然后进行绘画。注：当前的柱状图的高已经实现动态赋值。柱状图的显示设置：op1。

柱状图多维条形图vue_vue-vant-echart

weixin_39723102的博客

12-18

559

// 引入基本模板let echarts = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/line')require('echarts/lib/chart/bar')// 引入提示框和title组件require('echarts/lib/component/tooltip')require('echarts...

使用Vant用ECharts拿不到dom的问题

2301_77055885的博客

01-04

469

使用Vant框架的时候，用ECharts有时候会拿不到dom。

VantUI做倒计时+环形进度条

sdhuangzheng的博客

08-22

1271

本来想用VantUI做倒计时+环形进度条，在CSDN搜了搜，没有我想要的答案，我就自己做了一个。话不多说，上效果：在上代码：在template标签下的： <van-cell > <template > <span> <van-count-down :time="time" format="mm 分ss" /> </span> <van-tag type="danger"&gt

h5-my-like:vue + vue-router + vuex + axios + mock + vant + openlayers + echarts

03-28

123qwe 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 运行端到端测试 npm run test:e2e 运行单元测试 npm run test:unit 自定义配置请参阅。

vue组件封装 —— 仪表盘（有缺口的环形进度条内显示百分比值）

朝阳39的博客

12-08

2336

组件 s-progress.vue <template> <div class="el-progress" :class="[ 'el-progress--' + type, status ? 'is-' + status : '', { 'el-progress--without-text': !showText, 'el-progress--text-inside': textInside, ..

vue2圆环进度条（带渐变）

weixin_45118138的博客

05-13

2328

前言使用vue2实现一个圆环进度条 带有加载动画、中间为插槽、背景可以设置渐变效果用法使用前需要导入组件 <ProgressBar :percent-num='20' :speed='4'></ProgressBar> 效果展示完整代码如下 <template> <div class="percentloop"> <div class="circle-left"> <div ref.

小程序,vant和echarts层级覆盖问题(canvas会覆盖这些组件)

mmmm00_的博客

12-15

686

最后退而求其次想到wx:if 使用wx:if控制echarts显隐来解决。刚开始时用z-index调试层级无论调试vant 还是echarts 都不管用。

【小程序实战】echarts以及vant组件的使用

qq_44654974的博客

08-08

3077

一、效果呈现二、使用步骤 1.导入echarts的组件（参考官网） 2.（放在js 文件）修改echarts数据重点使用legend、tooltip，我还在此基础上进行了datazoom的使用进行数据的交互处理，另外若想在一个页面显示多个图表，在js文件内进行option的多个定义并初始化chart，再在wxml进行引用即可。（另外记得在json文件进行引入）部分参考代码 //wxml文件  <view class="container"&g

Vue3 + vant + Echarts Tab切换不展示第二个tab页图表

weixin_39428080的博客

10-28

997

// 要写@click事件，不能写@click-tab <van-tabs v-model:active="active" type="card" @click="changeAmount"> <van-tab title="违规金额(除擅自提前营业外)" lazy-render="true"> <div id="main3" v-if="isShowLeftDom"></div> <no-da.

移动端vant的tab标签切换结合echarts图获取不到元素问题解决

前端开发小白9527

11-10

1199

解决方法：通过tab提供的click事件,点击一次,则初始化一次dom元素,之后再拿数据去画图,这个时候还是要用到nextTick,以保证dom更新完毕后再把数据渲染上去(因为数据在created就已经拿到) <van-tabs @click="onclick()" v-model="active" swipeable color="rgb(41,135,223)" :lazy-render="fal...

仪表盘形进度条改造，可自己写插件

weixin_46554173的博客

03-13

917

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

vant 索引城市不对_Vant Area 省市区选择

06-09

您好，关于 Vant Area 省市区选择组件索引城市不对的问题，可能是因为您使用的城市数据与组件默认的数据格式不一致导致的。建议您检查一下城市数据格式是否符合组件的要求，具体可以参考 Vant 官方文档中关于 Area 组件的数据格式说明。另外，也可以尝试使用 Vant 官方提供的城市数据来测试，看是否能正常使用组件。如果问题仍然存在，可以提供更详细的信息或代码，以便更好地定位问题。

vant 半圆仪表盘_echart 画出仪表盘 式进度条

vant 半圆仪表盘_echart 画出仪表盘式进度条