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.