在Vue中创建仪表盘–vgauge

在Vue中创建仪表盘–vgauge

插件名称:vue-vgauge

发布时间:2020年4月6日

插件作者:amroessam

官网 演示 GitHub下载

vgauge是Vue.js包装器gauge.js,使得它更容易产生Vue.js支持的Web应用程序酷仪表。

变更日志:

v1.2.1(08/19/2020)

  • 修复内存泄漏

安装和下载:

# NPM
$ npm install vgauge --save

使用:

1.安装并导入vgauge组件。

import VGauge from 'vgauge';

2.注册量规组件。

export default {
  components: {
    VGauge
  },
  data() {
    return {
      value: 35
    };
  }
};

3.将仪表组件插入您的应用程序模板。

<v-gauge :value="100" />

4.所有可能的道具来配置量规。

unit: {
  type: String,
  default: ""
},
height: {
  type: String,
  default: "200px"
},
width: {
  type: String,
  default: "200px"
},
decimalPlace: {
  type: Number,
  default: 0
},
gaugeValueClass: {
  type: String,
  default: ""
},
top: {
  type: Boolean,
  default: false
},
maxValue: {
  type: Number,
  default: 100
},
minValue: {
  type: Number,
  default: 0
},
options: {
  type: Object,
  default: function() {
    return {
      angle: 0.15,
      lineWidth: 0.44,
      radiusScale: 1,
      pointer: {
        length: 0.6,
        strokeWidth: 0.035,
        color: "#000000"
      },
      limitMax: false,
      limitMin: false,
      colorStart: "#6FADCF",
      colorStop: "#8FC0DA",
      strokeColor: "#E0E0E0",
      generateGradient: true,
      highDpiSupport: true
    };
  }
},
animationSpeed: {
  type: Number,
  default: 10
},
initialValue: {
  type: Number,
  default: 0
},
value: {
  type: Number,
  default: 50
},
donut: {
  type: Boolean,
  default: false
}
相关插件