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

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

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


const barChart = reactive({
    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    data: [120, 200, 150, 80, 70, 110, 130]
})

</script>

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