37 lines
958 B
Vue
37 lines
958 B
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> |