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

最新推荐文章于 2024-08-20 11:35:49 发布

NXY_小月月

最新推荐文章于 2024-08-20 11:35:49 发布

阅读量912

点赞数 3

文章标签： vue js html css

本文链接：https://blog.csdn.net/weixin_46554173/article/details/104844668

版权

在vue项目中，由于版本限制无法使用elementui的高版本仪表盘进度条，作者通过自己的实现，创建了一环套一环的仪表盘效果，提供了实现代码，可供参考并可封装为组件。

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

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

描述

项目框架使用到的是vue，有一个需求是要用到图表统计数据，开始想到去elementui找现成的插件，如下图
在这里插入图片描述
无奈的是我们的项目使用的是2.3.2版本，但此仪表盘进度条组件Progress用到type属性dashboard，此属性只有2.9.2以上版本才可以使用，一下将项目升到这个版本也考虑到很多因素先不升级，并且我们想要的是一环套一环的效果，下面实现的效果图可以看到。我也找了一些别的组件也没有现成能实现我们想要的效果，就想的自己写一个类似的demo，也可以供大家参考，后续也可以封装成组件方便使用。

最终实现的效果如下图

在这里插入图片描述

实现代码

<template>
   <div class="progressDemo" v-on:mouseleave="hideDetail()">
     <svg v-for="(item, index) in showList" v-on:mouseover="showDetail(index)" :style="'width: '+item.width+'px;height: '+item.height+'px;left: '+item.left+'px;top: '+item.top+'px;z-index: '+item.zIndex+';'" viewBox="0 0 100 100">
       <path d="
       M 50 50
       m 0 50
       a 50 50 0 1 1 0 -100
       a 50 50 0 1 1 0 100
       " :stroke="item.bgColor" :stroke-width="dasharrayList[index]" fill="none" stroke-linecap="round" class="circle_track"></path>
       <path d="
       M 50 50
       m 0 50
       a 50 50 0 1 1 0 -100
       a 50 50 0 1 1 0 100
       " :stroke="item.strokeColor" fill="none" stroke-linecap="round" :stroke-width="item.strokeWidth" class="circle_path" :style="'stroke-dasharray: '+item.dasharray+'px,385px'"></path>
     </svg>
     <div v-if="detailShow" class="detailShow">
       <p>{
   {
   details1}}</p>
       <p>{
   {
   details2}}</p>
     </div>
     <ul class="textTips">
       <li v-for="(item, index) in showList">{
   {
   item.name}}{