Echarts:如何删除仪表图表中的底部空间

Chr*_*Joo 6 gauge typescript echarts angular

我正在尝试使用百度的Echarts 实现仪表图。应用于其他图表的网格属性会被应用,但仪表图表中的底部空间不会被删除,如下图所示。实际上,网格属性删除了条形图中的空格,但事实并非如此。我还应用了半径(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'
            }
          ]
        }
      ] }; 
  }

Run Code Online (Sandbox Code Playgroud)

CSS

  .graph-container {
    border: 2px solid #DDDDDD;
    width: 100%;
    height: 260px;
    position: relative;
    justify-content: center;
    align-items: center; 
  } 
Run Code Online (Sandbox Code Playgroud)

HTML(角度)

<div [options]="chartOption"  class="graph-container" echarts></div>    
Run Code Online (Sandbox Code Playgroud)

Chr*_*Joo 4

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

~~

半径:'120%',

中心:['50%','80%']。

~~

在此输入图像描述