如果给柱状图设置颜色,我们执行在 option 中 传入 color 字段的一个数组。代码如下:
option = {
color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'],
...
}
上面是根据柱状图 legend 中 data 进行颜色区分。如果我们只有一个类别,分别给 xAxis 上的柱状图进行颜色区分,代码如下:
option = {
...
series: [{
data: [],
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
if (params.dataIndex >= colorList.length) { //给大于颜色数量的柱体添加循环颜色的判断
index = params.dataIndex - colorList.length;
}
return colorList[params.dataIndex]
}
}
}
}]
}
那么如何给柱状图添加渐变色呢?
0,0,1,0分别代表了右、下、左、上四个位置的颜色坐标,然后再在下方的数组中:
{offset: 0, color: '#3977E6'},代表颜色坐标为0的颜色
{offset: 0.5, color: '#3A8EE6'},代表颜色坐标为0.5的颜色
{offset: 0.8, color: '#FAB6B6'},代表颜色坐标为0.8的颜色
{offset: 1, color: '#37BBF8'}代表颜色坐标为1处的颜色
option = {
...
series: [
{
name: '数量',
type: 'bar',
data: [],
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#3977E6'},
{offset: 1, color: '#37BBF8'}
]
)
}
}
}
]
};
折线区域颜色渐变:
option = {
areaStyle:{
normal:{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(80,141,255,0.39)'
}, {
offset: .34,
color: 'rgba(56,155,255,0.25)'
},{
offset: 1,
color: 'rgba(38,197,254,0.00)'
}])
}
},
}
参考案例:echarts 柱状图渐变色背景