vgauge is a Vue.js wrapper for gauge.js that makes it easier to generate cool gauges in Vue.js powered web apps.
# NPM
$ npm install vgauge --save
1 Install and import the vgauge component.
import VGauge from 'vgauge';
export default {
components: {
VGauge
},
data() {
return {
value: 35
};
}
};
<v-gauge :value="100" />
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
}
Author: amroessam
Live Demo: https://jz3qoxny63.codesandbox.io/
Download Link: https://github.com/amroessam/vgauge/archive/master.zip
Official Website: https://github.com/amroessam/vgauge
#vuejs #javascript #vue-js