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

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="currentValue"
    />
  </div>
</template>

<script>
import VueSpeedMeter from "vue-speed-meter";

export default {
  name: "Component",
  components: {
    VueSpeedMeter,
  },
  data: function() {
    return {
      customStyle: {
        size: 500,
        scaleColor: "#B0CBE9",
      },
      currentValue: 20,
    };
  },
 }
</script>

Parameters

Props	Type	Default	Description
currentValue	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.
- animationTime	Number	1	Time of animation in seconds. Time of moving needle from start value to current value.
- animation	Boolean	true	Animation is ON by default. Can be disabled with 'false'.
- 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.