青色渐变折线echarts 折线配置项内容和展示

      option = {
    tooltip: {
        formatter: '{a}: <br/>{b} : {c}%',
        axisPointer: {
            lineStyle: {
                color: '#029aab'
            }
        },
        trigger: 'axis',
        backgroundColor: 'rgba(9,38,106,0.5)',
        borderWidth: 1,
        borderColor: '#00F5FF'
    },
    grid: {
        top: '29%',
        left: '6%',
        right: '12%',
        bottom: '6%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        splitLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,0.28)'
            }
        },
        boundaryGap: false,
        data: [8.1, 8.3, 8.4, 8.5, 8.6, 8.7],
        axisLabel: {
            textStyle: {
                color: '#FFFFFF',
                fontSize: '16'
            }
        },
        axisTick: {
            show: true,
            inside: true,
            lineStyle: {
                color: '#fff'
            }
        }
    }],
    yAxis: [{
        type: 'value',
        max: 100,
        interval: 25,
        splitLine: {
            show: false,
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            formatter: '{value} %',
            show: true,
            textStyle: {
                color: 'rgba(255, 255, 255, 0.5)',
                fontSize: '14'
            }
        }
    }, ],
    series: [{
        name: '在线趋势',
        type: 'line',
        smooth: true,
        showSymbol: true,
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: 'rgba(55, 242, 255, 0.5)' // 0% 处的颜色
            }, {
                offset: 1,
                color: 'rgba(55, 242, 255, 0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        lineStyle: {
            color: 'rgb(55, 242, 255)'
        },
        itemStyle: {
            borderColor: 'rgb(55, 242, 255)',
            borderWidth: 3,
        },
        label: {
            show: true,
            distance: 10,
            color: '#bae0fd',
            formatter: '{c} %'
        },
        areaStyle: {},
        data: [56, 66, 55, 83, 22, 32, 92]
    }]
}