vue-waterball

Vue module for creating chart like echarts-liquidfill by SVG in your application.

Examples

Vue.js 2.x

$ npm i vue-waterball -S

$ yarn add vue-waterball

main.js

import Vue from 'vue';
import WaterBall from 'vue-waterball';

Vue.component('WaterBall', WaterBall);

template:

<WaterBall />

Attribute	Description	Type	Accepted Values	Default
size	width and height of component	number	-	200
percentage	value from 0 to 1	number	0 to 1	0.5
border-width	width of border	number	-	5
border-color	color of border	string	-	'#F00'
padding	the distance between border and water	number	-	2
background-color	background color of component	string	-	'#FFF'
water-color	color of water	string	-	'#F00'
dur	on animation cycle duration, millisecond	number	-	5000
amplitude	times of half size, from 0 to 1, bigger number represents bigger amplitude	number	-	0.3
wave-length	wave length, just use when type is 'horizontal'	number	-	200
font-size	font size	number	-	20
font-color	font color	string	-	'#000'
type	wave direction	string	'horizontal' / 'vertical'	'vertical'

default slot will replace the center text.