在echarts中series属性中,有一个itemStyle的属性是用来设置每一项的样式的,在itemStyle中的color属性用于设置颜色,支持单色、线性渐变、径向渐变和纹理填充等,好像是每个样式(line、bar等)的都有这个属性,大家可以在官网查看。
还是原来那个图,改变series中的第一个对象中的color,其中x,x2,y,y2分别表示四个不同的方向( 此处指1 ——> 0的方向 ):
- x : 从左向右 1 ——> 0
- x2:从右向左 1 ——> 0
- y:从上向下 1 ——> 0
- y2:从下向上 1 ——> 0
series: [
{
name: this.legend[0],
type: 'bar',
barGap: 0,
barMaxWidth: 10,
data: this.yicheDatas,
itemStyle: {
barBorderRadius: [5, 5, 0, 0],
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
{
name:this.legend[1],
type: 'bar',
barMaxWidth: 10,
data: this.homeOfCarDatas,
itemStyle: {
barBorderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{offset: 1, color: '#39E489'},
{offset: 0, color: '#35C97A'}
]
)
}
},
{
name: this.legend[2],
type: 'bar',
barMaxWidth: 10,
data: this.understandCarDatas,
barGap:"20%", //不同系列的柱间距离
barCategoryGap:"30%", //同一系列的柱间距离
itemStyle: {
barBorderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{offset: 1, color: '#FFD473'},
{offset: 0, color: '#FDC955'}
]
)
}
}]
效果图如下: