<template>
    <div class="module">
        <ModuleCard2 title="年龄分布情况">
            <Bar3d id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
        </ModuleCard2>
    </div>
</template>

<script setup>
import { ref, reactive, inject, defineEmits } from 'vue';
import ModuleCard2 from './card/ModuleCard2.vue';
import Bar3d from '../components/echarts/Bar3d.vue';

const emits = defineEmits(['click']);

const axios = inject('axios');
const keyCount = ref(0);

const barChart = reactive({
    xData: [],
    data: []
})

const onClick = (params) => {
    emits('click', {
        type: 'age',
        name: params.name
    });
}

axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
    let data = res.data;
    data.forEach(item => {
        barChart.xData.push(item.name);
        barChart.data.push(item.value);
    })
    keyCount.value++;
}).catch(err => {
    console.error(err);
})
</script>

<style lang="stylus" scoped>
// .module
//     .bar
//         background-image url(/assets/imgs/card/bg9.png)
</style>