echarts 柱状图隐藏x、y轴的内容,隐藏x,y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值
1.隐藏x轴坐标轴,在xAxis
下使用axisLine
属性为false
,相反显示则是true
axisLine:{//x轴坐标轴,false为隐藏,true为显示"show":false},
2.隐藏x轴坐标轴的数值,在xAxis
下使用axisLabel
属性为false
,相反显示则是true
axisLabel:{show: true }, //显示x轴的数值
3.隐藏x轴坐标轴刻度线,在xAxis
下使用axisTick
属性为false
,相反显示则是true
axisTick: {//x轴刻度线show:true},
4.X轴整体代码
xAxis: {show:true,type: 'value',splitLine:{show:true},"axisLine":{//x轴坐标轴"show":true},axisLabel:{show: true },axisTick: {//x轴刻度线show:true,alignWithLabel: true,},},
5.如图是不想显示的x轴代码
全部代码如下
<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();});