先看图是否满足你的需求
提示:单个柱子的背景色设置这就不说了,百度一下就可以,这里的这种方式可能也不太合适单个柱子
上面的这种目前是满足我的开发需求的,为了达到这个需求我也是找了各种搞法(废话不多说,直接上方法),
xAxis:
{
type: 'category',
data: ['10月','11月', '12月', '1月'],
boundaryGap: true,
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['red', '#000','gray','green'] //这里重点,用于设置颜色的数组,
//(有了这个属性,那我们完全可以自己在根据某些条件来生成这样一个数组)
}
}
},
以下是这个属性的官方文档地址:https://echarts.apache.org/next/zh/option.html#xAxis.splitArea
以下是上图完整的代码演示(可以去echarts图例跑一跑):
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
option = {
color: ['#007BFF', '#4cabce', '#006699', '#F0AD4E80'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '1%',
right: '65%',
bottom: '66%',
containLabel: true
},
legend: {
data: ['前年', '去年', '今年', '平均'],
left: '7%',
top: '4%',
},
xAxis:
{
type: 'category',
data: ['10月','11月', '12月', '1月'],
boundaryGap: true,
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['red', '#000','gray','green']
}
}
},
yAxis: [
{
type: 'value',
min: 0,
max: 250,
interval: 50
}
],
series: [
{
name: '前年',
type: 'bar',
barGap: 0,
data: [230, 180, 80,130],
},
{
name: '去年',
type: 'bar',
data: [220, 154, 90,150]
},
{
name: '今年',
type: 'bar',
data: [220, 130, 90,180]
},
{
name: '平均',
type: 'line',
step: 'middle',
data: [223, 155, 87,153]
},
]
};
以上就是 多柱状图,不同颜色背景的设置实现,希望对你有所帮助(如果有帮助,希望能点个赞支持一下)~!