Как уменьшить отступы от электронных карт?

Question

Я использую echarts для визуализации некоторых данных в моем веб-приложении. Я использую диаграмму калибровки basi c для визуализации. Если вы заметили изображение ниже, на графике слишком много отступов. Я хотел бы удалить эти отступы, и в идеале диаграмма должна занимать 100% пространства внутри контейнера?

Вот код javascript:

// Настройка диаграммы gauge_basic_options = {

            // Add title
            //title: {
            //    text: 'Server resources usage',
            //    subtext: 'Random demo data',
            //    x: 'center'
            //},

            // Add tooltip
            tooltip: {
                formatter: "{a} <br/>{b}: {c}%"
            },

            // Add series
            series: [
                {
                    name: 'Total Invoices',
                    type: 'gauge',
                    center: ['50%', '55%'],
                    detail: {formatter:'{value}%'},
                    data: [
                        {value: 50, name: 'Total Invoices'}
                    ]
                }
            ]
        };

Есть идеи, как это сделать?

Answer 1

В манометре вы также можете контролировать заполнение с помощью диаграммы radius . По умолчанию радиус составляет 75%, а для полного заполнения пространства необходимо установить новое значение, например:

option = {
  series: [{
  name: 'Total Invoices',
  type: 'gauge',
  radius: '100%', // this
  center: ['50%', '50%'],
  detail: {formatter:'{value}%'},
  data: [ {value: 50, name: 'Total Invoices'} ]
}]
  };

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width:300px; height:300px;"></div>

Answer 2

Заполнение автоматически регулируется в зависимости от размера div.

Например: ниже div будет использовать всю страницу и отображать датчик с большим количеством пробелов

<div id="main" style="width: 100vh;height:100vh;"></div>

И ниже одного будет компактный

<div id="main" style="width: 100vh;height:100vh;"></div>

Check эта скрипка - http://jsfiddle.net/athishayd/x5Lc3mr6/1/

Я хотел бы удалить эти отступы и в идеале сделать так, чтобы график занимал 100% пространства - Это могло бы помешать эстетике датчика.