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
}