Q-Level 水位图

参考 dataV-水位图 (opens new window)

<QLevel :config="config" :data="data" style="width:150px;height:200px"></QLevel>

基本示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QLevel :config="config" :data="data" style="width:150px;height:200px"></QLevel>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
        },
        data: [55]
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

进阶示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QLevel :config="config" :data="data" style="width:150px;height:200px"></QLevel>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          shape: 'roundRect',
          waveHeight: 20,
          waveNum: 5,
          waveOpacity: 0.8
        },
        data: [66, 32]
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
data(对应:data)	水位位置[1]	Arrya<Number>	—	[]
shape	水位图形状	String	[2]	'rect'
colors	水位图配色	Array<String>	[3]	[4]
waveNum	波浪数量	Number	—	3
waveHeight	波浪高度	Number	—	40
waveOpacity	波浪透明度	Number	—	0.4
formatter	信息格式化	String	—	'{value}%'[5]

config 注释

[1] 可以有多个水位，但默认显示值最大的水位信息。

[2] 有三种形状可供选择：矩形rect、圆角矩形roundRect、圆形round。

[3] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

[4] 默认配色为['#00BAFF', '#3DE7C9'], 自动应用渐变色，若不想使用渐变色，请配置两个相同的颜色。

[5] 自动使用最大的水位值替换字符串中的'{value}'标记。