# 3d-stack

> vue 3d stack component

Latest version **0.2.0** (published 2017-09-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install 3d-stack
pnpm add 3d-stack
yarn add 3d-stack
bun add 3d-stack
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-09-18 |
| First published | 2017-09-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | luhuijian2013@gmail.com |
| Maintainers | luhuijian |
| Keywords | stack |

## Links

- npm: https://www.npmjs.com/package/3d-stack
- npm.io page: https://npm.io/package/3d-stack

## Dependencies (3)

- [3d-stack](https://npm.io/package/3d-stack.md) ^0.1.4
- [vue-router](https://npm.io/package/vue-router.md) ^2.7.0
- [vue-slider-component](https://npm.io/package/vue-slider-component.md) ^2.4.1

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2017-09-18
- 0.1.8 — 2017-09-18
- 0.1.6 — 2017-09-18
- 0.1.4 — 2017-09-18
- 0.1.2 — 2017-09-18
- 0.1.0 — 2017-09-18
- 0.0.8 — 2017-09-18
- 0.0.6 — 2017-09-18
- 0.0.1 — 2017-09-18

## README

# 3d-stack

## Install

```shel
// 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

```vue
<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>
```

---
_Source: https://npm.io/package/3d-stack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._