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

<script>
export default {
    name: "ELeft2",
    data() {
        return {
            data: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("ELeft2")
            );
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                grid: {
                    x: "5%",
                    y: "18%",
                    x2: "8%",
                    y2: "13%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                legend: {
                    data: ["种羊", "肉羊"],
                    top: 10,
                    textStyle: {
                        fontSize: 20,
                        color: "#fff",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    name: "(时间)",
                    nameTextStyle: {
                        fontSize: 20,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: "#fff", //左边线的颜色
                            width: "2", //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                    data: ["5月", "6月", "7月", "8月", "9月", "10月", "11月"],
                },
                yAxis: [
                    {
                        type: "value",
                        name: "(只)",
                        nameTextStyle: {
                            fontSize: 20,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "solid",
                                color: "#fff", //左边线的颜色
                                width: "2", //坐标线的宽度
                            },
                        },
                        axisLabel: {
                            formatter: "{value} ",
                            textStyle: {
                                color: "#fff",
                                fontSize: 20,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "肉羊",
                        type: "line",
                        lineStyle: {
                            color: "#01d7ef",
                            width: 2,
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#01d7ef", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#0d1943", // 100% 处的颜色
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        itemStyle: {
                            //borderWidth: 3,
                            //borderColor: 'yellow',
                            color: "#01d7ef",
                        },
                        smooth:true,
                        symbol: "circle",
                        symbolSize: 15, //折线点的大小
                        data: [14800, 11570, 12339, 8670, 9850, 13547, 17548],
                    },
                    {
                        name: "种羊",
                        type: "line",
                        lineStyle: {
                            color: "#AE3A4B",
                            width: 2,
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#AE3A4B", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#0d1943", // 100% 处的颜色
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        itemStyle: {
                            //borderWidth: 3,
                            //borderColor: 'yellow',
                            color: "#AE3A4B",
                        },
                        smooth:true,
                        symbol: "circle",
                        symbolSize: 15, //折线点的大小
                        data: [8678, 12457, 17542, 13548, 14956, 13578, 14754],
                    }
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

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