<template>
    <div class="container">
        <div id="EEveDis" style="height:400px;"></div>
    </div>
</template>

<script>
export default {
    name: "EEveDis",
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("EEveDis")
            );
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "母羊分布情况",
                    left: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    orient: "horizontal",
                    bottom: 10,
                    data: [
                        "发情母羊",
                        "已配种母羊",
                        "怀孕母羊",
                        "哺乳母羊",
                        "休情母羊"
                    ]
                },
                series: [
                    {
                        type: "pie",
                        // 内外圈厚度
                        radius: ["20%", "60%"],
                        label: {
                            formatter: "{d}%"
                        },
                        data: [
                            { value: 300, name: "发情母羊" },
                            { value: 300, name: "已配种母羊" },
                            { value: 200, name: "怀孕母羊" },
                            { value: 200, name: "哺乳母羊" },
                            { value: 200, name: "休情母羊" }
                        ],
                        color: [
                            "#FFB2FF",
                            "#72DADA",
                            "#3ABAFF",
                            "#FF6A01",
                            "#ff8295"
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" scoped>

</style>