bt-xtgxq-population-bigdata/src/module/ModuleLeft1.vue

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

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

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>