6

I'm trying to implement a gauge chart using Baidu's Echarts. The grid properties applied to other charts are applied, but the bottom space is not removed in the gauge chart as shown in the figure below. Actually, the grid property removes the space in Bar chart, but this is not the case. I also applied radius(100%), but cannot be removed that.

My Typescript code is below. How should I remove the bottom space as shown in the picture?

Thank you.

enter image description here

Typescript:

  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 (Angular)

<div [options]="chartOption"  class="graph-container" echarts></div>
Chris Joo
  • 577
  • 10
  • 24

2 Answers2

4

I solved this problem by changing the 'radius' and 'center' property values like

~~

radius: '120%',

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

~~

enter image description here

Chris Joo
  • 577
  • 10
  • 24
  • 1
    This works, but the canvas is still the original size and can cause problems by overlaying on top of other elements. I wish there was a better solution. – TinyTiger Feb 23 '23 at 16:03
-1

Just Add add the Below code in your chart options:

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

check the url for reference: https://xieziyu.github.io/ngx-echarts/#/advanced/advanced-usage

grid: {
                top: 0,      
                left: 0,
                right: 0,
                bottom: 0,
              },
nagarjuna reddy
  • 1
  • 1