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

<script setup>
import { ref, defineProps, defineEmits, inject } from 'vue';
import { onMounted } from 'vue';
import 'echarts-gl';
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 emits = defineEmits(['click']);
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));
    var data = [];
    props.data.forEach((item, index) => {
        data.push([index, 0, item])
    })
    chart.setOption({
        title: {
            text: props.title
        },
        legend: {
            show: true,
            type: 'scroll',
            orient: 'vertical',
            right: 60,
            top: 20,
            bottom: 20,
            textStyle: {
                color: '#FFF'
            },
        },
        xAxis3D: {
            type: 'category',
            data: props.xData,
            name: '年龄段',
            nameGap: 30,
            axisLine: {
                lineStyle: {
                    color: '#FFF'
                }
            },
        },
        yAxis3D: {
            type: 'category',
            data: ['年龄段'],
            name: null,
            axisLine: {
                lineStyle: {
                    color: '#FFF'
                }
            },
        },
        zAxis3D: {
            type: 'value',
            name: '人数',
            nameGap: 30,
            axisLine: {
                lineStyle: {
                    color: '#FFF'
                }
            },
        },
        grid3D: {
            boxWidth: 200,
            boxDepth: 40,
            viewControl: {
                // projection: 'orthographic'
            },
            light: {
                main: {
                    intensity: 1.0,
                    shadow: true
                },
                ambient: {
                    intensity: 0.3
                }
            }
        },
        series: [
            {
                type: 'bar3D',
                data: data,
                shading: 'lambert',
                label: {
                    fontSize: 16,
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20,
                        color: '#FFFFFF'
                    },
                    itemStyle: {
                        color: '#FFFFFF'
                    }
                }
            }
        ]
    });
    chart.on('click', (params) => {
        emits('click', {
            index: params.dataIndex,
            name: props.xData[params.dataIndex],
            value: props.data[params.dataIndex]
        })
    })
}

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

</script>

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