1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > echarts 柱状图隐藏x y轴坐标轴 刻度线 隐藏x y轴坐标轴的数值

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

时间:2024-05-10 14:12:42

相关推荐

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。