如何解决百度Echarts仪表盘图表底部多余空白无法消除的问题

问题核心原因 #

grid配置仅作用于柱状图、折线图这类直角坐标系图表，仪表盘为独立的非直角坐标系系列，不受grid参数控制，因此你之前针对柱状图生效的空白消除方案对仪表盘无效。

具体解决方案 #

你当前配置的仪表盘是上半圆形态（起始角180°、结束角0°），默认圆心center: ['50%', '50%']定位在容器垂直居中位置，导致上半部分显示仪表盘、下半部分留空，只需调整圆心的垂直位置即可消除底部空白：

• 将series中center配置的第二个参数（垂直偏移值，数值越大位置越靠下）调大，让圆心向下移动，上半圆就会填满容器上半区域，底部空白自然消失，参考值可以设为70%~80%，你可以根据实际显示效果微调数值。
• 原本无用的grid配置可以直接删除，不影响仪表盘显示。

修改后的核心代码参考：

public chartOption: any;  

getData( ){
  this.chartOption = {
    // 删掉无用的grid配置
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        splitNumber: 8,
        radius: '100%', 
        center: ['50%', '75%'], // 仅修改这一行，垂直方向圆心下移
        // 剩余其余配置保持不变即可
        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'
          }
        ]
      }
    ] }; 
}

如果调整center后还有少量空白，可以适当把radius值调到105%~110%进一步拉伸填充。

内容的提问来源于stack exchange，提问作者Chris Joo