柱状图中的柱体颜色渐变详细说明
先来看一下柱体颜色渐变的效果
以下是实现渐变效果的代码:
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'
}
]
),
}
}]