【统计图】Echarts实现多条折线图渐变堆叠效果

initSgLineChart() {
    // 基于DOM，初始化echarts实例（注意！Vue的DOM日怪的很，一般要腾个1秒才加载完）
    this.lineChart = this.$echarts.init(
        document.getElementById("sg-line-chart")
    );
    onresize=()=>{
        this.lineChart.resize();//当页面大小变化→图标对应变化
    }
    // 绘制折线图（曲线图）
    this.lineChart.setOption({
        grid: {
            left: 23,
            top: 30,
            right: 22,
            bottom: 10,
            containLabel: true//false是依据坐标轴来对齐的,true是依据坐标轴上面的文字边界来对齐
        },
        legend: {
            top: -2,
            right: 20,
            itemGap: 5,//图例每项之间的间隔
            height: 10,
            itemWidth: 15,//图例标记的图形宽度
            itemHeight: 10,
            padding: [5, 0, 0, 0],
            textStyle: {
                padding: [1, 0, 0, -5]
            },
            data: [
                { name: "实到", textStyle: { color: "#18c196" } },
                { name: "迟到", textStyle: { color: "#ff976a" } },
                { name: "旷课", textStyle: { color: "#f15441" } },
                { name: "请假", textStyle: { color: "#0089ff" } }
            ]
        },
        xAxis: {
            type: "category",
            boundaryGap: false, //防止统计图左侧和纵轴有间隙
            axisLabel: { textStyle: { color: "gray" } },
            axisTick: { show: false }, //隐藏横坐标刻度小线条
            splitLine: {
                show: true,
                lineStyle: { color: ["#f0f0f0"] } //纵向分割线
            },
            axisLine: { lineStyle: { color: "lightgray", width: 1 } },
            data: ["7/6", "7/7", "7/8", "7/9", "7/10"]//横坐标的标签文字
        },
        yAxis: {
            type: "value",
            name: "人数/日期",
            min: 0,
            minInterval: 1,
            nameLocation: "end",
            nameTextStyle: { color: "gray", fontSize: "12" },
            axisLabel: { textStyle: { color: "gray" } },
            axisTick: { show: false }, //隐藏纵坐标刻度小线条
            splitLine: {
                show: true,
                lineStyle: { color: ["#f0f0f0"] } //横向分割线
            },
            axisLine: { lineStyle: { color: "lightgray", width: 1 } }
        },
        series: [
            {
                name: "实到",
                smooth: false, //平滑
                type: "line",
                symbolSize: 10, //折线拐点大小
                data: [41, 51, 55, 58, 49],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#18c196", //图例颜色
                        borderWidth: 4,
                        borderColor: "#18c196",
                        lineStyle: { color: "#18c196", width: 2 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色（线条下半部分）
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#18c196" },
                            { offset: 1, color: "#18c19600" }
                        ])
                    }
                }
            },
            {
                name: "迟到",
                smooth: false, //平滑
                type: "line",
                symbolSize: 0, //折线拐点大小
                data: [3, 6, 3, 1, 1],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#ff976a", //图例颜色
                        borderWidth: 2,
                        borderColor: "#ff976a",
                        lineStyle: { color: "#ff976a", width: 1 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色（线条下半部分）
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#ff976a" },
                            { offset: 1, color: "#ff976a00" }
                        ])
                    }
                }
            },
            {
                name: "旷课",
                smooth: false, //平滑
                type: "line",
                symbolSize: 0, //折线拐点大小
                data: [1, 3, 1, 0, 4],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#f15441", //图例颜色
                        borderWidth: 2,
                        borderColor: "#f15441",
                        lineStyle: { color: "#f15441", width: 1 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色（线条下半部分）
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#f15441" },
                            { offset: 1, color: "#f1544100" }
                        ])
                    }
                }
            },
            {
                name: "请假",
                smooth: false, //平滑
                type: "line",
                symbolSize: 0, //折线拐点大小
                data: [5, 0, 1, 1, 6],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#0089ff", //图例颜色
                        borderWidth: 2,
                        borderColor: "#0089ff",
                        lineStyle: { color: "#0089ff", width: 1 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色（线条下半部分）
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#0089ff" },
                            { offset: 1, color: "#0089ff00" }
                        ])
                    }
                }
            }
        ]
    });
    // 点击折线图拐点
    this.lineChart.off("click"); //先移除，再点击（这行代码是为了防止重复绑定触发点击事件）
    this.lineChart.on("click", "series.line", params => {
        this.$parent.tempData.attendanceTeacher.form = this.form;
        this.$parent.tempData.attendanceTeacher.query = {
            KC: this.KC,
            BJ: this.BJ,
            RQ: params.name,
            KCRQFW: this.KCRQFW
        };
        this.$router.push({
            path: "/attendanceTeacherHistoryDetail",
            query: this.$parent.tempData.attendanceTeacher.query
        }); //折线点点击后，可具体查看本次课程的具体签到情况。
    });
},