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

<script>
export default {
    name: "ERight1",
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("ERight1")
            );
            // 指定图表的配置项和数据
            let option = {
                title: {
                    left: "4%",
                    top: "4%",
                    text: "种羊等级分布",
                    textStyle: {
                        color: "#fff",
                        fontSize: 30,
                    },
                },
                color: ["#EFBB1A", "#D77169", "#C14F60", "#953F61"],
                tooltip: {
                    trigger: "item",
                    // formatter: "{b} : {c}",
                    formatter(val) {
                        return `${val.data.name}：${val.data.val}`
                    },
                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                grid: {
                    x: "5%",
                    y: "22%",
                    x2: "10%",
                    y2: "5%",
                    containLabel: true,
                },
                legend: {
                    data: ["甲", "乙", "丙", "丁"],
                    bottom: 10,
                    textStyle: {
                        fontSize: 20,
                        color: "#fff",
                    },
                },

                series: [
                    {
                        // name: "漏斗图",
                        type: "funnel",
                        left: "10%",
                        top: 90,
                        //x2: 80,
                        bottom: 60,
                        width: "80%",
                        // height: {totalHeight} - y - y2,
                        min: 0,
                        max: 100,
                        minSize: "0%",
                        maxSize: "100%",
                        sort: "descending",
                        gap: 2,
                        label: {
                            show: true,
                            position: "inside",
                            fontSize: 20,
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: "solid",
                            },
                        },
                        itemStyle: {
                            borderColor: "#fff",
                            borderWidth: 1,
                        },
                        emphasis: {
                            label: {
                                fontSize: 25,
                            },
                        },
                        data: [
                            { value: 20, name: "甲", val: 365 },
                            { value: 40, name: "乙", val: 789 },
                            { value: 60, name: "丙", val: 1024 },
                            { value: 80, name: "丁", val: 1458 },
                        ],
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

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