echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值

最新推荐文章于 2025-05-09 10:30:04 发布

置顶 Э时间行者于我

最新推荐文章于 2025-05-09 10:30:04 发布

阅读量4.2w

点赞数 20

CC 4.0 BY-SA版权

分类专栏： echarts js 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_45094682/article/details/114830255

js 同时被 2 个专栏收录

50 篇文章

订阅专栏

echarts

18 篇文章

订阅专栏

本文介绍如何使用ECharts隐藏柱状图的X、Y轴坐标轴、刻度线及数值等元素，通过调整配置项实现图表的定制化需求。

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

echarts 柱状图隐藏x、y轴的内容,隐藏x，y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值

1.隐藏x轴坐标轴,在`xAxis`下使用`axisLine`属性为`false`，相反显示则是`true`

axisLine:{     //x轴坐标轴，false为隐藏，true为显示
	"show":false
},

eachsrts002

2.隐藏x轴坐标轴的数值,在`xAxis`下使用`axisLabel`属性为`false`，相反显示则是`true`

axisLabel:{ show: true }, //显示x轴的数值

eachrst002

3.隐藏x轴坐标轴刻度线,在`xAxis`下使用`axisTick`属性为`false`，相反显示则是`true`

axisTick: {		//x轴刻度线
	show:true
},

eachrts003

4.X轴整体代码

xAxis: {
	show:true,
	type: 'value',
	splitLine:{
　　　　show:true
　　},
	"axisLine":{     //x轴坐标轴
		"show":true
	},
	axisLabel:{ show: true },
	axisTick: {		//x轴刻度线
		show:true,
		alignWithLabel: true,
	},
},

eacharts004

5.如图是不想显示的x轴代码

eachrts001

全部代码如下

<div id="main5" style="width: 100%;height: 434px;"></div>

var chartFnc = {
	init: function() {;
		this.chartGraphFnc();
	},
	chartGraphFnc: function () {	// 柱状图 查看次数
		var myChart = echarts.init(document.getElementById('main5'));
		var option = {
			grid: {
				left: '3%',
				right: '4%',
				bottom: '6%',
				width:"auto",
				containLabel: true
			},
			xAxis: {
				show:true,
				type: 'value',
				splitLine:{
			　　　　show:true
			　　},
				"axisLine":{     //x轴坐标轴
					"show":false
				},
				axisLabel:{
					show: false
				},
				axisTick: {		//x轴刻度线
					show:false
				},
			},
			yAxis: {
				type: 'category',
				data: ['1-10次', '11-20次', '21-40次', '41-60次', '61-80次', '91-100次', '101-150次', '151-200次', '201-300次', '301次以上'],
				// show:false,
				axisLine:{
					show:false
				},
				axisTick: {
					show:false,
					alignWithLabel: true,
				},
				splitArea : {show : false},
			},
			series: [{
				data: [160, 29, 150, 80, 70, 130,12,20,40,80],//假数据
				type: 'bar',
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				},
				barWidth : 22,//柱图宽度
				itemStyle:{
					normal: {
						label: {
							show: true,	//是否展示
							position: 'right', //在上方显示
							textStyle: {	//数值样式，显示的文字大小和颜色
								fontSize : '12',
								color: '#0A1F44'
							}
						},
						color: '#6f96fe' //蓝色
					}
				},
			}]
		};

		// 为echarts对象加载数据
		myChart.setOption(option);
		},
	}
	// 初始化图表组件
	chartFnc.init();
});