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

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

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

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

echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值_第1张图片

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

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

echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值_第2张图片

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

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

echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值_第3张图片

4.X轴整体代码

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

echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值_第4张图片

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

echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值_第5张图片

全部代码如下

<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();
});

注:如果想改变y轴内容,则跟x轴相反,放到yAxis里即可!!!

你可能感兴趣的:(echarts,js,前端,javascript)