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

<script>
export default {
    name: "EBottom1",
    data() {
        return {
            data1: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
            data2: [28, 28, 18.2, 25.6, 28.8, 35.6, 30.6],
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("EBottom1")
            );
            // 指定图表的配置项和数据
            let option = {
                // backgroundColor: "#0D1943",
                title: {
                    text: "种羊销售额度",
                    left: "4%",
                    top: "4%",
                    textStyle: {
                        fontSize: 25,
                        color: "#fff"
                    },
                },
                grid: {
                    x: "5%",
                    y: "22%",
                    x2: "8%",
                    y2: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        fontSize: 25,
                        color: "#fff"
                    }
                },
                // legend: {
                //     data: ["胴体", "种羊"],
                //     top: 10,
                //     textStyle: {
                //         fontSize: 20,
                //         color: "#fff",
                //     },
                // },
                xAxis: {
                    data: ["5月", "6月", "7月", "8月", "9月", "10月", "11月"],
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                    name: "(时间)",
                    nameTextStyle: {
                        fontSize: 20,
                        color: "#fff",
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                            width: 2,
                        },
                    },
                },
                yAxis: {
                    splitLine: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#fff", //左边线的颜色
                            width: "2", //坐标线的宽度
                        },
                    },
                    name: "(万元)",
                    nameTextStyle: {
                        fontSize: 20,
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                },
                series: [
                    // {
                    //     //真实数据所在
                    //     name: "胴体",
                    //     type: "bar",
                    //     itemStyle: {
                    //         color: "#147CE3",
                    //         barBorderRadius: 3,
                    //     },
                    //     barWidth: '50%',
                    //     label: {
                    //         show: true, //开启显示
                    //         position: "top", //在上方显示
                    //         textStyle: {
                    //             //数值样式
                    //             color: "#42EFF5",
                    //             fontSize: 20,
                    //         },
                    //         formatter: "{c}",
                    //     },
                    //     data: this.data1,
                    // },
                    {
                        //真实数据所在
                        name: "种羊",
                        type: "bar",
                        itemStyle: {
                            // color: "#28A757ee",
                            color: "#16AFB8",
                            barBorderRadius: 3,
                        },
                        barGap: "-100%",
                        barWidth: '50%',
                        label: {
                            show: true, //开启显示
                            position: "top", //在上方显示
                            textStyle: {
                                //数值样式
                                color: "#1BF538",
                                fontSize: 20,
                            },
                            formatter: "{c}",
                        },
                        data: this.data2,
                    }
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

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