echarts折线图颜色渐变设置

发布时间 2023-06-03 14:35:32作者: 小白字太白
 const color1="rgb(229,53,59,0.05)"
    const color2="rgb(229,53,59,0)"
 series: [
            {
                data: [12, 30, 60, 80, 100, 60, 130,12, 30, 60, 80, 100, 60, 130],
                type: 'line',
                smooth: true,
                areaStyle:{
                  // color:'rgba(229,53,59,0.01)'
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                offset: 0,
                                color: color1
                                }, // %0的颜色值
                                {
                                offset: 1,
                                color: color2
                                } // 100%的颜色值
                            ])
                },
                lineStyle:{
                  color:'#E5353B ',
                  width:'3'
                }
            }
        ],

将你需要的渐变颜色带入到

series设置项的 areaStyle属性中,实现颜色渐变效果,具体更多的用法请参照官网