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	量规的值必须包含在min和max之间。如果不是，则将其设置为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;
    // ...
  }
}

<<>

下一条>>