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

最新推荐文章于 2024-07-29 15:05:35 发布

贼猫子

最新推荐文章于 2024-07-29 15:05:35 发布

阅读量1w

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/weixin_41700532/article/details/82021214

版权

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

摘要由CSDN通过智能技术生成

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