fast-dataview-ui

Appearance

Return to top
On this page

LiquidChart 水位图

用于展示水位高度,水位上下限以及波浪动效。

基础用法

currLevel:当前水位,maxLevel:最大水位,background:背景颜色

50
<template>
  <FLiquidChart style="width:500px;height:300px;" :currLevel="state.currLevel" :maxLevel="state.maxLevel" :background="state.background"></FLiquidChart>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
let state = reactive({
  currLevel: 50,
  maxLevel: 100,
  background: 'rgb(227, 247, 255)'
});
</script>

自定义波浪

waveOption属性接受LiquidChartWave[]类型,其中:offestTop为波浪偏移,
waveScale为波浪尺寸,waveDirection为波浪前进方向,waveColor为波浪颜色
waveDuration为波浪动画时长(毫秒),begin为动画延迟开始(毫秒)

<template>
  <FLiquidChart style="width:500px;height:300px;" :currLevel="state.currLevel" :waveOption="state.waveOption" :maxLevel="state.maxLevel" :background="state.background" :textOption="{show:false}"></FLiquidChart>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
let state = reactive({
  currLevel: 50,
  maxLevel: 100,
  background: 'rgb(227, 247, 255)',
  waveOption: [
    {
      offestTop: -20,
      waveScale: 15,
      waveDuration: 6 * 1000,
      begin: 2000,
      waveColor: '#1566c4'
    },
    {
      offestTop: -10,
      waveScale: 10,
      waveDuration: 3 * 1000,
      begin: 1000,
      waveColor: '#158fe5'
    },
    {
      offestTop: 20,
      waveScale: 5,
      waveDirection: 'left',
      waveDuration: 3 * 1000,
      waveColor: '#43b8f9'
    },
  ]
});
</script>

自定义水位线

lineOption属性接受LiquidChartLine[]类型,其中level为横线的液位,
color为横线的颜色,text为横线的文本

上限90m下限20m
<template>
  <FLiquidChart style="width:500px;height:300px;" :currLevel="state.currLevel" :maxLevel="state.maxLevel" :lineOption="state.lineOption" :background="state.background" :textOption="{ show: false }"></FLiquidChart>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
let state = reactive({
  currLevel: 50,
  maxLevel: 100,
  background: 'rgb(227, 247, 255)',
  lineOption: [
    { level: 90, color: 'red', text: '上限{level}m' },
    { level: 20, color: 'blue', text: '下限{level}m' },
  ]
});
</script>

自定义文本

textOption属性接受LiquidChartText类型,
text为文本内容,{level}标记会被当前液位代替,{percent}标记会被当前液位百分比代替

50m(50.00%)
<template>
  <FLiquidChart style="width:500px;height:300px;" :currLevel="state.currLevel" :maxLevel="state.maxLevel" :background="state.background" :textOption="state.textOption"></FLiquidChart>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
let state = reactive({
  currLevel: 50,
  maxLevel: 100,
  background: 'rgb(227, 247, 255)',
  textOption: {
    color: 'blue',
    fontSize: 28,
    text: '{level}m({percent}%)',
    offest: [0, -99]
  }
});
</script>

参数

参数名说明类型可选值默认值
currLevel当前液位number-0
maxLevel最高液位,如果不设置最大值,则水位默认为50%的高度number-
background背景颜色string-transparent
borderWidth边框宽度number-10
borderColors边框颜色,分别为左右下边框颜色,上边框颜色string[]-['#294d99', '#294d99']
lineOption横线配置LiquidChartLine[]-[]
waveOption波浪配置LiquidChartWave[]-
textOption文本配置LiquidChartText-

LiquidChartLines属性

参数名说明类型可选值默认值
level横线的液位number-
color横线的颜色string-
text横线的文本,{level}标记会被横线液位替代string-

LiquidChartWave属性

参数名说明类型可选值默认值
offestTop波浪偏移number-0
waveScale波浪尺寸number-15
waveDirection波浪前进方向stringleft , rightright
waveDuration波浪动画时长(毫秒)number-10 * 1000
begin动画延迟开始number-0
waveColor波浪颜色string-#4579e2

LiquidChartText属性

参数名说明类型可选值默认值
show是否展示文本boolean-true
offest文本偏移,默认居中number[]-[0, 0]
fontSize字体大小number-22
color字体颜色string-white
text文本内容,{level}标记会被当前液位代替,{percent}标记会被当前液位百分比代替string-15

方法

方法名类型说明
resize() => void手动调用 resize 方法使边框获取正确的高宽