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