echarts设置刻度值的背景色，隐藏xy轴，使柱状图每根柱的颜色不相同

最新推荐文章于 2025-05-19 13:50:38 发布

原创最新推荐文章于 2025-05-19 13:50:38 发布 · 1w 阅读

6 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Echarts进行个性化配置，包括隐藏X、Y轴，设置刻度值背景色以及确保每个柱状图柱子颜色各不相同。此外，还提到了当刻度值为中文时，需要在axisLabel的formatter中转换为英文以获得预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、隐藏xy轴

show：false

2、设置刻度值的背景色

axisLabel:{
     backgroundColor: "#ccc",
}

3、柱状图每根柱的颜色不相同

itemStyle:{
	normal:{
		color:function(params) { 
			return "#0000FF"
		}
	}
},

完整demo：

option = {
    xAxis: {
        data: ['aa', 'bb', 'cc', 'dd'],
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
axisLabel:{
    color:"#333",
    fontSize:16,
    formatter:function(value){
    	return '{' + value + '| }\n{value|' + value+ '}';
    },
    rich: {
        value: {
            lineHeight: 30,
            align: 'center',
            padding: [73, 4, 5, 6]
        },
        aa: {
            height: 40,
            width:55,
            align: 'center',
            backgroundColor: "#f07f92",
        },
        bb: {
            height: 40,
            width:55,
            align: 'center',
            backgroundColor: "#f0de7f"
        },
        cc: {
            height: 40,
            width:55,
            align: 'center',
            backgroundColor:"#7fcbf0",
            
        },
        dd:{
        	height: 40,
            width:55,
            align: 'center',
            backgroundColor:"#7fe5a1",
        }
    }
}
    },
    legend:{
        data:["a","b","c","d","e","f"],
        icon:"circle",
        width:250,
        left:20
    },
    yAxis: {
        show:false,
        splitLine: {show: false}
    },
    series: [{
        type: 'bar',
        name:"d",
        itemStyle: {
            normal: {
                color: '#ddd'
            }
        },
        silent: true,
        barGap: '-100%', // Make series be overlap
        data: [500],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#8492a6"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'top',
                color:"#333"
            }
        },
    },{
        type: 'bar',
        z: 10,
        name:"a",
        data: [300],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#fc8675"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'inside',
                color:"#fff"
            }
        },
    },{
        type: 'bar',
        name:"e",
        itemStyle: {
            normal: {
                color: '#ddd'
            }
        },
        silent: true,
        barGap: '-100%', // Make series be overlap
        data: [0,200],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#008080"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'top',
                color:"#333",
                formatter:function(params){
                    if(params.value == 0){
                        return ""
                    }
                    return params.value
                }
            }
        },
    },{
        type: 'bar',
        z: 10,
        name:"b",
        data: [0,100],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#0000FF"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'inside',
                color:"#fff",
                formatter:function(params){
                    if(params.value == 0){
                        return ""
                    }
                    return params.value
                }
            }
        },
    },{
        type: 'bar',
        name:"f",
        itemStyle: {
            normal: {
                color: '#ddd'
            }
        },
        silent: true,
        barGap: '-100%', // Make series be overlap
        data: [0,0,150],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#FFFF00"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'top',
                color:"#333",
                formatter:function(params){
                    if(params.value == 0){
                        return ""
                    }
                    return params.value
                }
            }
        },
    },{
        type: 'bar',
        z: 10,
        name:"c",
        data: [0,0,100],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#FF0000"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'inside',
                color:"#fff",
                formatter:function(params){
                    if(params.value == 0){
                        return ""
                    }
                    return params.value
                }
            }
        },
    },{
        type: 'bar',
        name:"ee",
        itemStyle: {
            normal: {
                color: '#ddd'
            }
        },
        silent: true,
        barGap: '-100%', // Make series be overlap
        data: [0,0,0,550],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#FFEFD5"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'top',
                color:"#333",
                formatter:function(params){
                    if(params.value == 0){
                        return ""
                    }
                    return params.value
                }
            }
        },
    },{
        type: 'bar',
        z: 10,
        name:"ff",
        data: [0,0,0,500],
        itemStyle:{
        	normal:{
        		color:function(params) { 
        			return "#F08080"
        		}
        	}
        },
        label: {
            normal: {
                show: true,
                position: 'inside',
                color:"#fff",
                formatter:function(params){
                    if(params.value == 0){
                        return ""
                    }
                    return params.value
                }
            }
        },
    }]
};