有些需求是将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里面的距上下左右的距离可以自行调整。

以下是修改之前和修改之后的区别:

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐