donut-pie

half donut pie chart which using d3.js for vue

Usage no npm install needed!

<script type="module">
  import donutPie from 'https://cdn.skypack.dev/donut-pie';
</script>

README

DonutPie

Half donut pie chart which using d3.js for vue

Installation

npm i donut-pie

Usage

  1. global registration
// in main.js
import DonutPie from 'donut-pie'
// import 'donut-pie/dist/DonutPie.css'

Vue.use(DonutPie)
  1. use as vue component
// in your vue file
import { DonutPie } from 'donut-pie'

export default {
  components: {
    DonutPie
  }
  ...
}

Configuration

<donutPie v-model="your percent (eg. 60)" :title="'your title'" :remark="'your remark'"/>

for more detail

<donutPie v-model="your percent (eg. 60)" :title="'your title'" :remark="'your remark'" :conf="{ width: 360, height: 200, thickness: 22, color: '#8888D3', bgColor: '#E9E9E9', percentColor: '#333', titleColor: 'rgba(0, 0, 0, 0.65)', titleTemplate: '<h1>title</h1>' disableCornerRadius: false}"/>

Screenshots