echarts折线图 labelLine+symbol渐变

效果图

实例代码

function gradientColor(startColor, endColor, step) {
    var startRGB = this.hexToRgb(startColor),
    startR = startRGB.r,
    startG = startRGB.g,
    startB = startRGB.b,
    endRGB = this.hexToRgb(endColor),
    endR = endRGB.r,
    endG = endRGB.g,
    endB = endRGB.b,
    sR = (endR - startR) / step,
    sG = (endG - startG) / step,
    sB = (endB - startB) / step;
    var colorArr = [];
    for (var i = 0; i < step; i++) {
        var hex = this.rgbToHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
        colorArr.push(hex);
    }
    return colorArr;
}
gradientColor.prototype.hexToRgb = function(hex){
    return {
        r: parseInt("0x" + hex.slice(1, 3)),
        g: parseInt("0x" + hex.slice(3, 5)),
        b: parseInt("0x" + hex.slice(5, 7)),
        rgb: "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + ")"
    };
}
gradientColor.prototype.rgbToHex = function(color){
    var rgb = color.split(',')
    var r = parseInt(rgb[0].split('(')[1])
    var g = parseInt(rgb[1])
    var b = parseInt(rgb[2].split(')')[0])
    var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex
}
var sdata = [820, 932, 901, 934, 1290, 1330,1320];
var colors = new gradientColor('#0987F6','#04BBFD',7);
sdata = sdata.map((item,idx) => {
    return {
        value: item,
        itemStyle: {
            borderColor: colors[idx]
        }
    }
})
option = {
    backgroundColor: '#122A42',
    xAxis: {
        type: 'category',
        axisTick: {
            show:false,
        },
        axisLabel: {
            color: '#fff'
        },
        axisLine: {
            lineStyle: {
                color: '#314963'
            }
        },
        data: ['7.24', '7.25', '7.26', '7.27', '7.28', '7.29', '7.30']
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show:false,
        },
        axisLabel: {
            color: '#fff'
        },
        axisLine: {
            lineStyle: {
                color: '#314963'
            }
        },
        splitLine: {
            show:false
        },
        min:function(value){
            return parseInt((value.min - (value.max - value.min)/4) || 0);
        },
        max:function(value){
            return parseInt((value.max + (value.max - value.min)/4) || 0);
        },
        interval: 200
    },
    series: [{
        data: sdata,
        type: 'line',
        symbolSize: 10,
        hoverAnimation: false,
        label: {
            show:true,
            color: '#fff',
            fontSize: 14,
            textShadowColor: '#000',
            textShadowBlur: 5,
            
        },
        lineStyle: {
            width: 5, 
            type: 'solid', 
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                offset: 0, 
                color: '#04BBFD' 
            }, { 
                offset: 1, 
                color: '#0987F6' 
            }]),
            shadowColor: 'rgba(0,0,0,1)',
            shadowBlur: 10,
        },
        itemStyle: {
            borderWidth: 10,
        }
    }]
};