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

<script>
export default {
    name: "ELeft3",
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("ELeft3"));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "种羊年龄分布",
                    left: "20%",
                    top: "5%",
                    textStyle: {
                        fontSize: 30,
                        color: "#fff",
                    },
                },
                color: ["#71D8F5", "#FAA4F6"],
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        fontSize: 20,
                        color: "#fff"
                    }
                },
                grid: {
                    x: "5%",
                    y: "18%",
                    x2: "8%",
                    y2: "5%",
                    containLabel: true,
                },
                legend: {
                    data: ["公羊", "母羊"],
                    top: "4%",
                    right: 10,
                    width: 40,
                    textStyle: {
                        color: "#fff",
                        fontSize: 20,
                    },
                },
                calculable: true,
                xAxis: {
                    name: "(年龄)",
                    nameTextStyle: {
                        fontSize: 20,
                        color: "#fff",
                    },
                    type: "category",
                    data: ["一年", "两年", "三年", "四年", "五年"],
                    textStyle: {
                        fontSize: 20,
                        color: "#fff",
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                            color: "#fff"
                        },
                    },
                },

                yAxis: {
                    name: "(数量)",
                    nameTextStyle: {
                        fontSize: 20,
                        color: "#fff",
                    },
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                            color: "#fff"
                        },
                    },
                },
                series: [
                    {
                        name: "公羊",
                        type: "bar",
                        barWidth: "30%",
                        data: [187, 186, 179, 142, 126],
                        markLine: {
                            data: [{ type: "average", name: "平均值", label: {fontSize: 20} }],
                        },
                    },
                    {
                        name: "母羊",
                        type: "bar",
                        barWidth: "30%",
                        data: [756, 869, 699, 759, 786],
                        markLine: {
                            data: [{ type: "average", name: "平均值", label: {fontSize: 20} }],
                        },
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

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