Package Exports

vue-speed-meter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-speed-meter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-speed-meter

Vue component to display round gauges such as speedometer, thermometer, barometer or tachometer.

default

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.