Echarts：如何去除仪表图中的底部空间

Question

我正在尝试使用百度的Echarts 实现仪表图。 应用于其他图表的网格属性被应用，但如下图所示，仪表图表中的底部空间未被删除。实际上，grid 属性删除了 Bar chart 中的空格，但事实并非如此。 我也应用了 radius(100%)，但不能删除它。

我的打字稿代码如下。我应该如何去除如图所示的底部空间？

谢谢。

打字稿：

  public chartOption: any;  

  getData( ){

    this.chartOption = {
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: -100 
      }, 
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 1,
          splitNumber: 8,
          radius: '100%', 
          center: ['50%', '50%'], 
          axisLine: {
            lineStyle: {
              width:10,
              color: [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '42%',
            width: 20,
            offsetCenter: [0, '-40%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 7,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#464646',
            fontSize: 10,
            distance: -60,
            formatter: function (value) {
              if (value === 0.875) {
                return 'GOOD';
              } else if (value === 0.625) {
                return '';
              } else if (value === 0.375) {
                return '';
              } else if (value === 0.125) {
                return ' BAD';
              }
              return '';
            }
          }, 
          title: {
            offsetCenter: [0, '-20%'],
            fontSize: 15
          },
          detail: {   
            fontSize: 20,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100) + '%';
            },
            color: 'auto'
          },
          data: [
            {
              value: 0.7,
              name: 'Not Bad'
            }
          ]
        }
      ] }; 
  }

scss

  .graph-container {
    border: 2px solid #DDDDDD;
    width: 100%;
    height: 260px;
    position: relative;
    justify-content: center;
    align-items: center; 
  } 

HTML（角度）

<div [options]="chartOption"  class="graph-container" echarts></div>    

Answer 1

我通过改变“半径”和“中心”属性值解决了这个问题

~~

半径：'120%',

center: ['50%', '80%'].

~~

Answer 2

只需在您的图表选项中添加以下代码：

 grid: {
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true,
          },

查看网址以供参考： https://xieziyu.github.io/ngx-echarts/#/advanced/advanced-usage

grid: {
                top: 0,      
                left: 0,
                right: 0,
                bottom: 0,
              },