<template>
    <div class="container">
        <!-- ESaleroom 销售额统计-->
        <div id="ESaleroom" style="height:450px;"></div>
    </div>
</template>

<script>
export default {
    name: "ESaleroom",
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("ESaleroom")
            );
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "销售额统计",
                    left: "center",
                    bottom: 0
                },
                color: ["#7c92f7"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0%",
                    right: "2%",
                    bottom: "10%",
                    containLabel: true
                },
                yAxis: [
                    {
                        type: "category",
                        data: [
                            "羔羊龙骨",
                            "羔羊全排",
                            "羔羊千棒骨",
                            "羔羊前腿骨",
                            "羔羊后腿骨",
                            "羔羊后腿肉卷",
                            "带骨羊后腿",
                            "中式羊后腿",
                            "法式羊后腿",
                            "羔羊精卷",
                            "带羊肉卷",
                            "带羊骨前腿",
                        ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                xAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "数量",
                        type: "bar",
                        barWidth: "60%",
                        data: [
                            76,
                            70,
                            98,
                            144,
                            190,
                            238,
                            258,
                            263,
                            244,
                            188,
                            142,
                            97
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

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