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>