3d-stack

vue 3d stack component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
3d-stack
Minified + gzip package size for 3d-stack in KB

Readme

3d-stack

Install

// npm
npm install 3d-stack

// yarn
yarn add 3d-stack

Options

Props

Name Type Description
initData Params: obj[Array] init data

Events

Name Type Description
change Params: value[Object] values change when the callback function

How to Use

<template>
  <div>
    <h1>3D Stack Chart</h1>
    <stack :init-data="browsers" v-if="browsers && browsers.length" @change="change"></stack>
  </div>
</template>

<script>
const initData = [
  { name: 'chrome', count: 300, color: '#3866d1' },
  { name: 'ie', count: 180, color: '#299529' },
  { name: 'edge', count: 120, color: '#257e25' },
  { name: 'firefox', count: 80, color: '#9d2424' },
  { name: 'safari', count: 50, color: '#252525' },
  { name: 'opera', count: 30, color: '#995924' },
  { name: 'others', count: 40, color: '#484848' }
]

export default {
  data() {
    return {
      browsers: initData
    };
  },
  methods: {
    change(e) {
      console.log('value:', e);
    }
  }
}
</script>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.