echart折线图设置渐变色

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name:'样例3',
                        type:'line',
                        itemStyle: {
                            color: '#6A5ACD', 
                            normal: {  
                                lineStyle: {        // 系列级个性化折线样式 
                                    width: 2, 
                                    type: 'solid', 
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                        offset: 0, 
                                        color: '#0000FF' 
                                    }, { 
                                        offset: 1, 
                                        color: '#CD5C5C' 
                                    }]),//线条渐变色 
                                } 
                            }, 
                            emphasis: {
                                color: '#6A5ACD',   
                                lineStyle: {        // 系列级个性化折线样式 
                                    width: 2, 
                                    type: 'dotted', 
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                        offset: 0, 
                                        color: '#1E90FF' 
                                    }, { 
                                        offset: 1, 
                                        color: '#0000FF' 
                                    }]) 
                                } 
                            } 
                        },//线条样式
                        areaStyle:{
                            normal:{
                               //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                    offset: 0,
                                    color: 'rgba(80,141,255,0.39)'
                                }, {
                                    offset: .34,
                                    color: 'rgba(56,155,255,0.25)'
                                },{
                                    offset: 1,
                                    color: 'rgba(38,197,254,0.00)'
                                }])

                            }
                        },//区域颜色渐变
                        data:[450, 432, 401, 454, 590, 530, 110,242]
                 
    }]
};

echart折线图设置渐变色_第1张图片

转载于:https://my.oschina.net/u/2440810/blog/3066067

你可能感兴趣的:(echart折线图设置渐变色)