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

<script>
export default {
    name: "EBottom4",
    data() {
        return {
            data: [220, 182, 191, 234, 290],
            time: ["四月", "五月", "六月", "七月", "九月"]
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("EBottom4")
            );
            // 指定图表的配置项和数据
            let option = {
                title: {
                    left: "4%",
                    top: "4%",
                    text: "种羊销售数",
                    textStyle: {
                        color: "#fff",
                        fontSize: 30,
                    },
                },
                grid: {
                    x: "5%",
                    y: "22%",
                    x2: "8%",
                    y2: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                xAxis: {
                    data: this.time,
                    name: "(时间)",
                    nameTextStyle: {
                        fontSize: 20,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#fff", //左边线的颜色
                            width: "2", //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                },
                yAxis: {
                    name: "(数量)",
                    nameTextStyle: {
                        fontSize: 20,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#fff", //左边线的颜色
                            width: "2", //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 37,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                borderColor: "#18CEE2",
                                barBorderRadius: 28,
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    1,
                                    0,
                                    [
                                        { offset: 0, color: "#2dc3db" },
                                        { offset: 1, color: "#0f88c0" },
                                    ]
                                ),
                            },
                            emphasis: {
                                barBorderRadius: 13,
                                shadowBlur: 18,
                                shadowColor: "rgba(218,170, 58, 0.7)",
                            },
                        },
                        data: this.data,
                    },
                    {
                        name: "a",
                        tooltip: {
                            show: false,
                        },
                        type: "pictorialBar",
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    1,
                                    0,
                                    [
                                        { offset: 0, color: "#2bc6dd" },
                                        { offset: 1, color: "#18cde1" },
                                    ]
                                ),
                                borderWidth: 1,
                                borderColor: "#18CEE2",
                            },
                        },
                        symbol: "circle",
                        symbolSize: ["38", "22"],
                        symbolPosition: "end",
                        data: this.data,
                        z: 3,
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

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