1. vue-peity
A Vue version of an excellent peity library for beautiful mini <svg> graphs.
vue-peity
Package: vue-peity
Created by: vue-bulma
Last modified: Tue, 28 Jun 2022 20:05:24 GMT
Version: 0.5.0
License: MIT
Downloads: 1,998
Repository: https://github.com/vue-bulma/peity

Install

npm install vue-peity
yarn add vue-peity

Peity

A Vue version of an excellent peity library for beautiful mini graphs.

Usage

<template>
  <peity :type="'pie'" :options="{ 'fill': ['red', '#eeeeee'], width: 50, height:50,  'innerRadius': 10, 'radius': 40 }" :data="pieData"></peity>
</template>

<script>
import Peity from 'vue-peity'

export default {
  components: {
    Peity
  },

  computed: {
    pieData () {
      return this.data.toString()
    }
  },

  data () {
    return {
      data: [1, 2, 3, 2, 2]
    }
  },

  created () {
    setInterval(() => {
      // https://vuejs.org/guide/list.html#Mutation-Methods
      this.data.unshift(this.data.pop())
    }, 377)
  }
}
</script>

Badges



fundon.me  · 
GitHub @fundon  · 
Twitter @_fundon

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin