Waterball NPM | npm.io

Light cross-platform Graph,Custom Configuration and animation supported

Demo

https://zedwang.github.io/waterball/demo/index.html

npm.io

The component supported AMD、CMD and standalone model

Install with standalone

<script src='/path/water-ball.min.js'></script>

<div id='container'></div>

var options = {
    value: 30,
    r: 100,
    color: '#787878'
}

var container  = document.getElementById('container')

var wb = new WaterBall(container, options);

// update

wb.setOptions({value:50})

Install with NPM

$ npm install waterball

This will install waterBall NPM packages.

Methods

setOptions(key,value)/setOptions(Object)

value 0~100

destroy()

destroy instance

Options

Field	Type	Default	description
fill	String/Array	`#fff`
waveStyle	String/Array	`['#5bf6a1','#2bdb72']`
waveWidth	Float	0.02
waveHeight	Int	8
speed	Float	.1
borderColor	String	`#2bdc76`
borderWidth	Int	2
value	Float	0
color	String	`#fff`
fontSize	String	`25px microsoft yahei`
textAlign	String	center
ext	String	`%`
format	Function	null	`format: function(value) { return value + 'kg'}`