<template>
    <div class="module">
        <ModuleCard1 title="民族分布统计">
            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"
                @click="onClick" />
        </ModuleCard1>
    </div>
    
</template>

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

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

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

const axios = inject('axios');

const keyCount = ref(0);
const barChart = reactive({
    xData: [],
    data: []
});
axios.get(`app/query/sqlrelease/q419513e`, {}).then(res => {
    let data = res.data;
    data.forEach((item, index) => {
        barChart.xData.push(item.name);
        barChart.data.push(item.value);
    })
    keyCount.value++;
}).catch(err => {
    console.error(err);
});
</script>

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