1.1.2 • Published 3 years ago
vue-speed-meter v1.1.2
vue-speed-meter
Vue component to display round gauges such as speedometer, thermometer, barometer or tachometer.
Docs&Demo
https://anastat.github.io/vue-speed-meter/
Install
npm i vue-speed-meter
Add to project
Global
// main.js
import VueSpeedMeter from "vue-speed-meter";
Vue.component('vue-speed-meter', VueSpeedMeter);
Local Usage
<template>
<div>
<VueSpeedMeter
:customStyle="customStyle"
:customCurrentValue="customCurrentValue"
/>
</div>
</template>
<script>
import VueSpeedMeter from "vue-speed-meter";
export default {
name: "Component",
components: {
VueSpeedMeter,
},
data: function() {
return {
customStyle: {
size: 500,
},
customCurrentValue: 20,
};
},
}
</script>
Parameters
Props | Type | Default | Description |
---|---|---|---|
customCurrentValue | Number | 0 | Speed meter value. |
customStyle: | Object | ||
- mainBackgroundColor | String | "#051226" | Background color of speed meter. |
- size | Number | 400 | Width and height of the speed meter in 'px'. |
- borderColor | String | "#041326" | Border color of the outer speed meter circle. |
- scaleColor | String | "#B0CBE9" | Color of the scale lines. |
- scaleValuesFontFamily | String | "'Titillium Web', sans-serif" | Font family of the scale values. |
- scaleValuesColor | String | "#B0CBE9" | Color of the scale values. |
- scaleStartValue | Number | 0 | Start value of the scale. |
- scaleStep | Number | 20 | Scale step between long lines. Cannot be 0 or negative value. |
- animationTime | Number | 1 | Time of animation in seconds. Time of moving needle from start value to current value. |
- needleColor | String | "#FE3816" | Color of the speed meter needle. |
- needleCircleColor | String | "#041326" | Color of the small needle circle. |
- needleCircleBorderColor | String | "#62A6F1" | Color of the border of small needle circle. |
needleAnimation | Boolean | true | Animation of needle. Moving from 0 to current value. Can be disabled with 'false'. |
shadowFilter | Boolean | true | Shadow of the scale values and needle circle. |