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

18 篇文章 0 订阅

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

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

  • 18
    点赞
  • 65
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值