vue-justgage v1.0.6

vue-justgage

A Vue plugin of JustGage

中文文档

Reference and Thanks

justgage

Install

npm install --save vue-justgage

or use dist/vueJustgage.js without webpack

<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/vueJustgage.js"></script>

Usage

You can import it in main.js

import vueJustgage from 'vue-justgage';
Vue.use(vueJustgage);

or import it in your own component.

<script>
import Vue from 'vue';
import vueJustgage from 'vue-justgage';
Vue.use(vueJustgage);
export default {
  ...
}
</script>

Sample

Please use methods after mounted hook.

<template>
  <vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
  <button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</template>

<script>
export default {
  data() {
    return {
      dflt: {
        min: 0,
        max: 200,
        donut: true,
        gaugeWidthScale: 0.6,
        counter: true,
        hideInnerShadow: true
      }
    }
  },
  mounted() {
    var g1 = this.$refs.g1.draw({
      id: 'g1',
      value: 125,
      title: 'javascript call',
      defaults: this.dflt
    });
  },
  methods: {
    refresh() {
      this.$refs.g1.refresh(this.getRandomInt(0, 100));
    }
  }
}
</script>

Options

All options can be used as data-option:

<vue-justgage ref="g1" id="g1" class="gauge" data-value="100"></vue-justgage>

options about container

options about gauge

options about text

options about animation

Methods

<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>

• draw: new a JustGage instance

this.$refs.g1.draw(options)

• refresh:refresh gauge

this.$refs.g1.refresh(this.getRandomInt(0, 100));

PS: the method getRandomInt can be used directly as this.getRandomInt()

For detailed explanation on how things work, consult the docs for vue-justgage.