Vue.js的SVG可定制的量规组件 - Vue-svg-Gauge

Vue.js的SVG可定制的量规组件 - Vue-svg-Gauge
插件名称 vue-svg-gauge
发布时间 2020年5月26日
插件作者 hellocomet

可定制的量规组件,带有用于VueJ的渐变和动画。

安装和下载:

# Yarn
$ yarn add vue-svg-gauge

# NPM
$ npm install vue-svg-gauge --save

ES6

以下示例也可以与CommonJS一起使用,方法是将ES6特定的语法替换为CommonJS等效项。

import Vue from 'vue'
import { VueSvgGauge } from 'vue-svg-gauge'

new Vue({
  components: {
    VueSvgGauge,
  }
})

Globals作为插件

import Vue from 'vue'
import App from './App.vue'
import VueSvgGauge from 'vue-svg-gauge'

Vue.use(VueSvgGauge)

new Vue({
  render: h => h(App),
}).$mount('#app')

全局变量(通过脚本标签)

添加Vue后,添加指向dist/vue-svg-gauge.min.js的脚本标签。

<html>
  <head>
    ...
  </head>
  <body>
    <div id="app">
      <vue-svg-gauge></vue-svg-gauge>
    </div>

    <script src="path/to/vue.js"></script>
    <script src="path/to/dist/vue-svg-gauge.min.js"></script>
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

用法

安装后,它可以作为以下任何模板的用户

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="1"
  :min="0"
  :max="4"
  :gauge-color="[{ offset: 0, color: '#347AB0'}, { offset: 100, color: '#8CDFAD'}]"
  :scale-interval="0.1"
/>
<!--  or  -->
<vue-svg-gauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="0"
  :min="0"
  :max="10"
  gauge-color="#8CDFAD"
  :scale-interval="0.1"
/>

Props

Props 类型 描述
value Number 量规的值必须包含在minmax之间。如果不是,则将其设置为min(如果劣等),或max(如果优劣) 70
min Number 可达到的最小值 0
max Number 可达到的最大值 100
startAngle Number 量规的起始角度。可以从-360°到360°,但必须小于endAngle -90
endAngle Number 量规的末端角度。可以从-360°到360°,但必须大于startAngle 90
innerRadius Number 内径将决定量规的厚度 60
separatorStep Number 每个分隔符之间的步数(将显示一个分隔符,每分钟+(n * spacerStep))。如果为0或null,则不显示任何内容 10
separatorThickness Number 隔板的厚度,单位为度 4
gaugeColor String,Array 量规的颜色,可以是简单的颜色或渐变色 [{ offset: 0, color: ‘#347AB0’ }, { offset: 100, color: ‘#8CDFAD’ }]
baseColor String 空量规的颜色 #DDDDDD
scaleInterval Number 刻度线之间的间隔,基于最小和最大。如果为0或null,则不显示任何内容 5
transitionDuration Number 过渡持续时间,以毫秒为单位。如果设置为0,则不会过渡 1500
easing String 动画缓动选项 Circular.Out

Slot

有一个主Slot,可让您显示仪表中想要的任何类型的html。

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="random"
  :separator-step="20"
  :scale-interval="10"
  :inner-radius="80"
>
  <div class="inner-text">
    <span>Let's make this <b>fun</b> !</span>
  </div>
</VueSvgGauge>
.inner-text {
  // 允许文本占用计量器顶部svg中的所有可用空间
  height: 100%;
  width: 100%;

  span {
    max-width: 100px;
    color: red;
    // ...
  }
}