阈值线echarts 折线配置项内容和展示

配置项如下
      option = {
    backgroundColor: '#0A1651',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        // icon: 'diamond',
        itemGap: 13,
        data: ['接口增加量', '接口减少量', '接口变化量'],
        top: '3%',
        left: 'center',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        bottom: '10%'
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },

        axisLabel: {
            margin: 10,
            textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: '12',
            }
        },
        splitLine: {
            lineStyle: {
                color: "rgba(255,255,255,0.1)",
            }
        }
    }],
    // visualMap: [{
    //     show: false,
    //     pieces: [
    //         {
    //             gt: 0,
    //             lt: 30,
    //             color: '#FFFF00',
    //         },
    //         {
    //             gt: 30,
    //             lt: 54,
    //             color: '#00A1EA',
    //         }
    //     ],
    //     outOfRange: {
    //         color: '#FF5D1D',
    //     },
    // }, ],
    series: [{
        name: '接口增加量',
        type: 'line',
        smooth: true,
        markLine: { //最大值和最小值
            data: [{
                    name: '阈值54',
                    yAxis: 54,
                    label: {
                        show: 'true',
                        position: 'end',
                        formatter: '增加量阈值54'
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: "#FF5D1D",
                        }
                    }

                },
            ]
        },
        lineStyle: {
            normal: {
                width: 1
            }
        },
        symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: 'green',
                    // borderColor: 'blue', //拐点边框颜色
                }
            },
        data: [50, 52, 52, 52, 52, 58, 52, 55, 48, 52, 52, 52, 54, 52, 52, 52, 50, 52, 52, 52, 52, 52, 55, 52, 52, 49, 52, 52, 52, 52, 52]
    },{
        name: '接口减少量',
        type: 'line',
        smooth: true,
        markLine: { //最大值和最小值
            data: [{
                    name: '阈值30',
                    yAxis: 30,
                    label: {
                        show: 'true',
                        position: 'end',
                        formatter: '减少量阈值30'
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: "#FF5D1D",
                        }
                    }

                },
              
            ]
        },
        lineStyle: {
            normal: {
                width: 1
            }
        },
        symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: '#00A1EA',
                    // borderColor: 'blue', //拐点边框颜色
                }
            },
       data: [30, 32, 32, 32, 32, 38, 32, 33, 36, 32, 32, 32, 34, 32, 32, 32, 39, 32, 32, 32, 32, 32, 33, 32, 32, 23, 32, 32, 32, 32, 32]
    },{
        name: '接口变化量',
        type: 'line',
        smooth: true,
        markLine: { //最大值和最小值
            data: [
                {
                    name: '阈值10',
                    yAxis: 10,
                    label: {
                        show: 'true',
                        position: 'end',
                        formatter: '变化量阈值10'
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: "#FF5D1D",
                        }
                    }
                },
               
            ]
        },
        lineStyle: {
            normal: {
                width: 1
            }
        },
        symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
                normal: {
                    color: 'yellow',
                    // borderColor: 'blue', //拐点边框颜色
                }
            },
        data: [10, 11, 12, 13, 11,9, 11, 12, 13, 11,9, 8, 10, 12, 13, 11,9, 8, 10, 12,10, 13, 11,9, 11, 12, 13, 11,9, 8, 10, 12, 13, 11,9, 8, 10, 12,10]
    } ]

}
    
截图如下