折线图线条渐变色

2020-06-22 15:54:39 浏览数 (1)

代码语言:javascript复制
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]
                 
    }]
};

QQ截图20200618154319.png

png

0 人点赞