hy.big_screen/src/views/Yield/charts/EBottom1.vue

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

<script>
export default {
    name: "EBottom1",
    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("EBottom1")
            );
            // 指定图表的配置项和数据
            let option = {
                // backgroundColor: "#0D1943",
                title: {
                    left: "4%",
                    top: "4%",
                    text: "产羔率",
                    textStyle: {
                        color: "#fff",
                        fontSize: 30,
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                grid: {
                    x: "5%",
                    y: "18%",
                    x2: "8%",
                    y2: "5%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                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",
                        nameTextStyle: {
                            fontSize: 20,
                        },
                        scale: true,
                        min(val) {
                            return Number((val.min * 0.9).toFixed(0));
                        },
                        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",
                        },
                        symbol: "circle",
                        symbolSize: 15, //折线点的大小
                        data: [252.6, 255.5, 252.4, 249.8, 252.6, 250.8, 251.9],
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

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