<template>
    <div class="container">
        <div id="ELeft1" style="height: 100%"></div>
    </div>
</template>

<script>
export default {
    name: "ELeft1",
    data() {
        return {
            timeArr: [],
            valueArr: [],
        };
    },
    mounted() {
        // this.drawChart();
        this.init();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("ELeft1"));
            let that = this;
            // 指定图表的配置项和数据
            let option = {
                color: ["#b93b6a"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                grid: {
                    x: "3%",
                    y: "18%",
                    x2: "5%",
                    y2: "5%",
                    containLabel: true,
                },
                legend: {
                    data: ["进入人数"],
                    icon: "circle",
                    itemGap: 5,
                    itemWidth: 10,
                    top: "2%",
                    x: "center",
                    textStyle: {
                        color: "#ccf5f9",
                    },
                },
                xAxis: {
                    type: "category",
                    data: that.timeArr,
                    axisTick: {
                        alignWithLabel: true,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#4865e3", //左边线的颜色
                            width: "1", //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#ccf5f9",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    scale: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#4865e3", //左边线的颜色
                            width: "1", //坐标线的宽度
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            type: "solid",
                            color: "rgba(72,101,227,0.7)",
                            width: "1",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#ccf5f9",
                        },
                    },
                },
                dataZoom: [
                    {
                        type: "inside",
                        start: 80,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "进入人数",
                        type: "bar",
                        barWidth: "15%",
                        data:  that.valueArr,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: "top", //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: "#ccf5f9",
                                        fontSize: 12,
                                    },
                                    formatter: "{c}",
                                },
                            },
                        },
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        init() {
            this.$axios.get(`http://122.112.252.100:8081/face/findDb?timeHorizon=oneYear`)
            .then(res => {
                if(res.data.status === 10000) {
                    this.timeArr = [];
                    this.valueArr = [];
                    res.data.object.forEach(item => {
                        this.timeArr.push(item.key);
                        this.valueArr.push(item.value);
                    })
                    this.drawChart();
                }
            })
        }
    },
};
</script>

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