美文网首页
折线图线条渐变色

折线图线条渐变色

作者: 冬天的_太阳 | 来源:发表于2020-06-18 15:43 被阅读0次
    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

    相关文章

      网友评论

          本文标题:折线图线条渐变色

          本文链接:https://www.haomeiwen.com/subject/mupuxktx.html