<template>
    <div class="bar">
        <div :id="domId" :style="{ width: w, height: h }"></div>
    </div>
</template>

<script setup>
import { ref, defineProps, inject } from 'vue';
import { onMounted } from 'vue';
const props = defineProps({
    id: String,
    w: {
        type: Number,
        default: 200
    },
    h: {
        type: Number,
        default: 200
    },
    title: {
        type: String,
        default: '柱状图'
    },
    xData: {
        type: Array,
        default: []
    },
    data: {
        type: Array,
        default: []
    }
});
const echarts = inject('echarts');
const domId = ref(props.id);
const w = ref(`${props.w}px`);
const h = ref(`${props.h}px`);

const init = () => {
    var chart = echarts.init(document.getElementById(domId.value));
    chart.setOption({
        title: {
            text: props.title
        },
        tooltip: {},
        grid: {
            left: 50,
            top: 10
        },
        xAxis: {
            type: 'category',
            data: props.xData
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            itemStyle: {
                opacity: 1
            },
            data: props.data,
            type: 'bar'
        }]
    })
}

onMounted(() => {
    init();
});

</script>

<style lang="stylus" scoped>
</style>