echarts 柱状图渐变色，每个柱子颜色都不同渐变色

最新推荐文章于 2025-07-10 14:18:10 发布

yangliweigauguagua

最新推荐文章于 2025-07-10 14:18:10 发布

阅读量1.1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： web 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_32674347/article/details/89354740

web 专栏收录该内容

82 篇文章

订阅专栏

本文详细介绍了如何在ECharts中配置渐变色柱状图，通过修改配置文件中的参数实现颜色的纵向、横向及反向渲染。特别讲解了如何利用LinearGradient设置颜色渐变效果，使图表更具视觉冲击力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

提醒：配置文件中的：0,0,0,1的意思是颜色竖向排列，0，0，1，0的意思是颜色横向渲染，1，0，0，0 横向相反渲染，0，1，0，0 竖向相反渲染

itemStyle: {
                //通常情况下：
                normal: {
                    barBorderRadius: 8,
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params) {
                        var colorList = [
                            ['rgb(14,102,179)', 'rgb(51,36,169)'],
                            ['#F5cF0D', '#fa9203'],
                            ['#61dbe8', '#0785de'],
                            ['#ff9717', '#ff4518'],
                        ];
                        var index = params.dataIndex;
                        if (params.dataIndex >= colorList.length) {
                            index = params.dataIndex - colorList.length;
                        }
                        return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [{
                                    offset: 0,
                                    color: colorList[index][0]
                                },
                                {
                                    offset: 1,
                                    color: colorList[index][1]
                                }
                            ]);
                    }
                },
            },