Echarts图形设置渐变色

最新推荐文章于 2025-11-12 11:48:54 发布

原创最新推荐文章于 2025-11-12 11:48:54 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #渐变色 #echarts设置渐变色 #柱状图 #柱状图渐变色

Echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ECharts为柱状图设置渐变颜色，通过LinearGradient实现从'#e6584c'到'#f18a82'的过渡，提升图表的视觉效果。

“岑夫子,丹丘生.将进酒,杯莫停”
给柱状图设置渐变色,效果如下:
这里写图片描述
设置代码如下:

series: [
            {
                name: '',
                type: 'bar',
                data: data.seriesList,
                 itemStyle: {
                  normal: {
                  //设置渐变色
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                    [
                       {offset: 0, color: '#e6584c'},
                        {offset: 1, color: '#f18a82'}
                    ])
                    }
                }
            }
        ]