rate-ball

It is a chart display tools, contain water ball,progress bar and doughnut Chart.

dependencies

It without dependencies

install

npm i rate-ball 

---

use

import BC from 'rate-ball'

Write a method

methods: {
    showball(){
        var args =[this.charts[0].id,this.charts[1].id,this.charts[2].id]
        BC.bc(args)
    }
}

Run this method in mounted

mounted() {
    this.showball()
}

template

<div v-for='(item,index) in charts' :key="index" :type='item.type' :id='item.id' :data-value='item.value' :data-size='item.size' :data-font='item.font' :data-color='item.color' :data-bgcolor='item.bgcolor' :data-width='item.width' :data-height='item.height'></div>

data

data() {
  return {
    charts:[{
      type:'ball',//Show water ball must use this name
      id:'ball',//Any name, but it must be unique
      value:50,
      size:100,
      color:'#f00',
      font:'16px',
      bgcolor:'#ccc',
      width:500,
      height:20
    },{
      type:'hoop',//Show doughnut Chart must use this name
      id:'hoop',//Any name, but it must be unique
      value:50,
      size:100,
      color:'#f00',
      font:'16px',
      bgcolor:'#ccc',
      width:500,
      height:20
    },{
      type:'bar',//Show progress bar must use this name
      id:'bar',//Any name, but it must be unique
      value:50,
      size:100,
      color:'#f00',
      font:'16px',
      bgcolor:'#ccc',
      width:500,
      height:20
    }]
  }
}

---

If you use Vue3 and want to use it's methods in setup(),Please refer to the following code,data and methods still out setup()

import BC from 'rate-ball'
import {getCurrentInstance} from 'vue'

setup(){
		const {proxy} = getCurrentInstance();
		const _this = proxy;
		var _per=window.performance;
						function getsec(time){
							return time;
						};
		let domOnloadCompleted;
		window.onload=function(domOnloadCompleted){
			   domOnloadCompleted=getsec(_per.timing.domComplete-_per.timing.domLoading)
			   setTimeout(function (){_this.showball();},domOnloadCompleted)
		};
	}

---

authorsunritzWelcome to communicate.