解决echarts图表柱状图超出坐标轴的问题_echarts 柱状图超出坐标轴背景未隐藏

最近项目中遇到这样一个问题，如下图：

由于容器太宽，数据量不多，导致每一个x轴的间距都特别大，还导致了柱状图超过了坐标轴。这个轴由于使用的是类目轴，首先我想到的是用留白属性，就把 boundaryGap设置为true

        xAxis: {
          type: 'category',
          boundaryGap: true,//设置为true
          data: _xAxis,
          axisLabel: {
            color: '#000000'
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#D9D9D9'
            }
          }
          axisTick: {
          alignWithLabel: true//类目轴中在 boundaryGap 为 true 的时候有效，
          //可以保证刻度线和标签对齐,不设置会出现柱状图不在刻度线中间
          }
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

但是这样做，折线图到坐标轴留白太多了，echarts类目轴的只有true和false两种，faLse就是贴边没有边距，true就是如图的间距。如图

也很不美观，所以不采用boundaryGap 设置为true，还是设置为false，然后采用了下面这个方法
y轴有一个offset属性，坐标轴grid也是可以控制距离的，series里面也有一个barWidth属性可以控制柱状图的宽度，首先可以控制grid让坐标轴往里面移，如图

然后控制y轴属性offset让y轴往外移动，然后设置series里面也有一个barWidth属性让柱状图变窄，因为这个柱状图是不同场景的数据，还进行了判断给值。

//部分属性设置代码
  offset: this.dataType === 'forecast' ? 50 : 24,
  barWidth: this.dataType === 'forecast' ? '50' : '',
  grid: {
     x: this.dataType === 'forecast' ? 80 : 60,
     y: 50,
     x2: this.dataType === 'forecast' ? 80 : 50,
     y2: 15,
     containLabel: true
   },


1
2
3
4
5
6
7
8
9
10
11
12

下面是修改后的图