Echarts图表隐藏X轴和Y轴
有些需求是将Echarts表充满整个盒子,看不到X轴和Y轴,就像下面这个样式。这个时候需要隐藏X轴和Y轴以及相关信息。show为false的时候为隐藏,true为显示。option = {grid: {left: '0%',//距左边边框的距离right: '0%',//距右边边框的距离bottom: '-20',//距下面边框的距离top: '30',//距上面边框的距离
·
有些需求是将Echarts表充满整个盒子,看不到X轴和Y轴。这个时候需要隐藏X轴和Y轴以及相关信息。show为false的时候为隐藏,true为显示。
option = {
grid: {
left: '0%', //距左边边框的距离
right: '0%', //距右边边框的距离
bottom: '-20',//距下面边框的距离
top: '30', //距上面边框的距离
containLabel: true,
},
xAxis: [
{
type: 'category',
data: data,
boundaryGap: false,
axisLine: {
show: false, //隐藏y轴
},
axisTick: {
show: false, //刻度线
},
},
],
yAxis: [
{
type: 'value',
max: data,
min: 0,
axisTick: {
show: false, //刻度线
},
axisLine: {
show: false, //隐藏y轴
},
axisLabel: {
show: false, //隐藏刻度值
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
},
],
}
grid里面的距上下左右的距离可以自行调整。
以下是修改之前和修改之后的区别:
更多推荐
已为社区贡献3条内容
所有评论(0)