<template>
    <div class="bar">
        <h4>{{title}}</h4>
        <div class="chart">
            <v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
                <v-tooltip />
                <v-axis />
                <v-bar position="x*y" />
            </v-chart>
        </div>
    </div>
</template>

<script>
const data = [];
for (let i = 0; i < 12; i += 1) {
    data.push({
        x: `${i + 1}月`,
        y: Math.floor(Math.random() * 1000) + 200,
    });
}
const tooltip = [
    'x*y',
    (x, y) => ({
        name: x,
        value: y,
    }),
];

const scale = [
    {
        dataKey: 'x',
        min: 2,
    },
    {
        dataKey: 'y',
        title: '时间',
        min: 1,
        max: 22,
    },
];
export default {
    name: 'Bar',
    props: ['title'],
    data() {
        return {
            data,
            scale,
            tooltip,
        };
    },
};
</script>

<style scoped lang="less">
.bar {
    position: relative;
}
</style>
