当前位置:编程学习 > JS >>

eCharts改变bar柱状图中的柱体颜色渐变

在ECharts中设置柱状图的渐变色,包括从上到下和从下到上的渐变效果
通过调整LinearGradient参数,可以实现不同方向的渐变,并提供了具体代码示例。
series: [{
                data: [18, 16, 8, 10, 5, 24],
                type: 'bar',
                showBackground: false,
                barWidth: '16px', //柱体宽度
                itemStyle: {
                    barBorderRadius: [2, 2, 0, 0], //柱体圆角   
                    color: new echarts.graphic.LinearGradient(
                        //前四个参数用于配置渐变色的起止位置,这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                        //通过修改前4个参数,可以实现不同的渐变方向
                        /*第五个参数则是一个数组,用于配置颜色的渐变过程。
                          每项为一个对象,包含offset和color两个参数
                        */
                        0, 0, 0, 1, [{//代表渐变色从正上方开始
                                offset: 0, //offset范围是0~1,用于表示位置,0是指0%处的颜色
                                color: '#005BEA'
                            }, //柱图渐变色
                            {
                                offset: 1, //指100%处的颜色
                                color: '#00C6FB'
                            }
                        ]
                    ),
                }
            }]
 
再试一下从下往上的渐变

 series: [{
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{//只要修改前四个参数就ok
                                offset: 0,
                                color: '#005BEA'
                            }, //柱图渐变色
                            {
                                offset: 1,
                                color: '#00C6FB'
                            }
                        ]
                    ),
                }
            }]
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,