如何减少 eCharts 的填充？

Question

I am using echarts for visualizing some data in my web-application. I am using basic gauge chart for the visualization. If you notice the image below, there is too much padding in the chart. I would like to remove those padding and ideally have the chart occupy 100% of the space within the container?

Here is the javascript code:

// Setup chart 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'}
                    ]
                }
            ]
        };

Any idea how to do it?

Answer 1

In the gauge you also can control the padding with chart radius . By default radius is 75% and for fill space completely you need to set new value, example:

 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

The padding is automatically adjusting based on the size of the div.

Eg: Below div will use the whole page and renders the gauge with plenty of whitespaces

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

And below one would be a compact one

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

Check this fiddle - http://jsfiddle.net/athishayd/x5Lc3mr6/1/

I would like to remove those padding and ideally have the chart occupy 100% of the space - This would hamper the gauge's aesthetics.

Answer 3

I was struggling with the bar chart for the same issue. Added below in options. This solved it.

grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0
    }

Answer 4

You can specify the spacing of the grid from each edge with a value, in pixels, or percentage:

var option = {
  grid: {
    left: '10%',
    right: '10%',
    top: 0,
    bottom: 0
  }
} 

However, I would warn against using 0 for top or bottom when you have hidden the x-axis. Part of the chart line can get clipped and will look a different thickness if it runs along the base of the axis.